Experimenting with a Collection of Items - Jest

I need to conduct a test on an array of objects. During the test coverage analysis of the displayed array, I found that the last object with the key link has certain conditions that are not covered.

export const relatedServicesList: IRelatedServiceItem[] = [
  {
    label: 'inquiry.title',
    link: '/adc/declaration/landing',
  },
  {
    label: 'extendDeposit.title',
    link: '/adc/extend-deposit/landing',
  },
  {
    label: 'generalAdminCustomsServices.landing.title',
    link:
      window.location.host === 'stage'
        ? '/demo'
        : '/test',
  },
];

Approach Taken for Testing

import { relatedServicesList } from './routes';
describe('Routes', () => {
  it('when host = stage', () => {
    global.window = Object.create(window);

    Object.defineProperty(window, 'location', {
      value: {
        host: 'stage',
      },
    });
    window.location.host = 'stage';
    expect(relatedServicesList[relatedServicesList.length - 1]).toEqual(
      expect.objectContaining({
        label: 'generalAdminCustomsServices.landing.title',
        link:
          'stage',
      }),
    );
  });

  it('when host != stage', () => {
    global.window = Object.create(window);

    Object.defineProperty(window, 'location', {
      value: {
        host: 'demo',
      },
    });
    window.location.host = 'demo';

    expect(relatedServicesList[relatedServicesList.length - 1]).toEqual(
      expect.objectContaining({
        label: 'generalAdminCustomsServices.landing.title',
        link: '/test',
      }),
    );
  });
});

The condition part remains uncovered. It should be noted that only the array is exported which is defined as type IRelatedServiceItem, there are no additional functions included.

Answer №1

It's important to note two key points:

  1. If you are using es6 import syntax to bring in the relatedServicesList array, make sure that the evaluation(

    window.location.host === 'stage' ? '/demo' : '/test'
    ) occurs before you change the value of window.location. To handle this situation, consider using require.

  2. Remember to utilize jest.resetModules() to reset the module registry - which clears the cache of all required modules. This ensures a fresh evaluation for each test case.

Below is a functional example: index.ts:

interface IRelatedServiceItem {
  label: string;
  link: string;
}

console.log('window.location.host: ', window.location.host);
export const relatedServicesList: IRelatedServiceItem[] = [
  {
    label: 'inquiry.title',
    link: '/adc/declaration/landing',
  },
  {
    label: 'extendDeposit.title',
    link: '/adc/extend-deposit/landing',
  },
  {
    label: 'generalAdminCustomsServices.landing.title',
    link: window.location.host === 'stage' ? '/demo' : '/test',
  },
];

index.spec.ts:

describe('59698218', () => {
  beforeEach(() => {
    jest.resetModules();
  });

  it('when host = stage', () => {
    Object.defineProperty(window, 'location', {
      value: { host: 'stage' },
      writable: true,
    });
    const { relatedServicesList } = require('./index');
    expect(relatedServicesList[relatedServicesList.length - 1]).toEqual({
      label: 'generalAdminCustomsServices.landing.title',
      link: '/demo',
    });
  });

  it('when host != stage', () => {
    Object.defineProperty(window, 'location', {
      value: { host: 'demo' },
      writable: true,
    });
    const { relatedServicesList } = require('./index');
    expect(relatedServicesList[relatedServicesList.length - 1]).toEqual({
      label: 'generalAdminCustomsServices.landing.title',
      link: '/test',
    });
  });
});

Unit test results with 100% coverage:

 PASS  src/stackoverflow/59698218/index.spec.ts (8.497s)
  59698218
    ✓ when host = stage (14ms)
    ✓ when host != stage (2ms)

  console.log src/stackoverflow/59698218/index.ts:107
    window.location.host:  stage

  console.log src/stackoverflow/59698218/index.ts:107
    window.location.host:  demo

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        9.649s

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59698218

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Require assistance with Dhtmlx and Wijmo grid context menus, as well as touch events, specifically when utilized on an iPhone's Safari browser

I recently created a web application utilizing DHTMLX 5.0 and Wijmo grid. Everything functions smoothly when accessed on Chrome for Android, including the context menu which is opened with a touch-'press and hold' gesture. However, I have encount ...

Develop a binary file in Angular

My Angular application requires retrieving file contents from a REST API and generating a file on the client side. Due to limitations in writing files directly on the client, I found a workaround solution using this question. The workaround involves crea ...

Does Apollo Federation provide support for a code-first development approach?

I have declarations using 'code-first' approach in my project, but now I want to utilize them as microservices. How can I separate my 'typeDefs' and 'resolvers' following Apollo's 'schema-first' methodology? Is ...

Angular 2 implementes a loading spinner for every HTTP request made

My objective is to implement a spinner functionality whenever an HTTP request occurs in my Angular app. Essentially, I want the user to see a loading screen during these requests within my app component. The setup for my spinner component and spinner servi ...

How can esbuild be used to load .wglsl files in Typescript files?

I'm currently utilizing esbuild to bundle my Typescript code, but I'm facing a challenge with configuring a loader for ".wgsl" files. Here is my app.ts file: import shader from './shader.wgsl'; //webgpu logic This is my shader.d.ts fi ...

Automatically insert a hyphen (-) between each set of 10 digits in a phone number as it is being typed into the text

I'm attempting to automatically insert a hyphen (-) in between 10 digits of a phone number as it is being typed into the text field, following North American standard formatting. I want the output to look like this: 647-364-3975 I am using the keyup ...

Is there a way to utilize an AXIOS GET response from one component in a different component?

I'm having trouble getting my answer from App.tsx, as I keep getting an error saying data.map is not a function. Can anyone offer some assistance? App.tsx import React, {useState} from 'react'; import axios from "axios"; import {g ...

Angular2 Filtering Problem

Trying to create a filter in angular2, I have constructed an array of products as shown below: private items = ["Apple", "Banana", "Orange"]; Below is the code for my filter pipe: import {Pipe} from 'angular2/core'; @Pipe({name:'filter&a ...

What are the steps to add code into the Monaco Editor using Playwright?

As I explore the world of Playwright, I am faced with a challenge regarding testing a feature that involves a monaco editor. Unfortunately, my search in Playwright documentation and forums did not yield any relevant information. Here is the test scenario ...

An ambient module will not be successfully resolved through a relative import operation

As per the typescript documentation (https://www.typescriptlang.org/docs/handbook/module-resolution.html): A relative import is resolved in relation to the importing file and does not resolve to an ambient module declaration. However, it also states: ...

Waiting for the response from $http in Angular2

In almost all REST requests, I require the user's ID to be included. After logging in a user, I store the token in local storage and pass the ID to user.service.ts (using the function setUserId(userId);). However, when authenticating a user using onl ...

Error in displaying dialogues upon clicking

Currently experimenting with creating a dialog modal using the tutorial found at https://github.com/gopinav/Angular-Material-Tutorial/tree/master/material-demo/src/app, specifically referring to the dialog-example and dialog folder. However, upon testing ...

Alter the color scheme of the material dialog's background

I have been trying to change the background color of a dialog, but so far I have only been successful in changing the outline. I used the panelClass property as I believed it was the correct way to do it. https://stackblitz.com/edit/jm9gob ...

VIDEOJS ERROR: A peculiar mistake has occurred. TypeError: The property 'value' cannot be read since it is undefined in the context of

Recently, I came across a fascinating plugin called videojs-thumbnails for video.js, and I'm eager to incorporate it into my angular component. However, I keep encountering an error that says: VIDEOJS: ERROR: TypeError: Cannot read property 'val ...

Can Bun automatically bundle my TypeScript files when I save them in VS Code?

Is it feasible for Bun to bundle my TypeScript upon saving a file in VS Code? The instruction manual suggests running bun run index.ts in the command line and including it in the package.json in this manner. However, I am unsure how to automate this proce ...

Managing arrays in local storage with Angular 2+

I seem to be missing a crucial element in my endeavor to save and retrieve an array in local storage within my Angular 4 application. The array is fetched from the server and stored in a variable named 'aToDo' with type 'any', like so: ...

fakeAsync failing to synchronize with async task completion

Scenario In my testing process, I am evaluating a component that utilizes an observable-based service to retrieve and display data for internationalization purposes. The i18n service is custom-made to cater to specific requirements. While the component ...

Obtaining JSON data in an Angular service: A beginner's guide

My JSON file has the following structure: { "user": [ { "id": 0, "data": [ { "userName": "iheb", "useremail": "", "userPassword": "kkk" } ], "questionnaireListe": [ { ...

"Exploring the process of retrieving URL parameters within an activated link using Angular 7 and executing a REST API call from a service

My aim is to retrieve data by utilizing the id field through Get parameters. Below is the URL code in my HTML that redirects to a specific page without triggering the service to fetch the REST API. <a [routerLink]="['/usedCars/detail', list ...

Use Ramda to convert an array of objects into nested objects

As a beginner, please forgive me for asking what may be considered a naive question. I currently have an array of objects const arr = [{id: 1, name: 'Pete'}, {id: 5, name: 'John'}, {id: 3, name: 'Peter'}] and I am looking to ...