Anticipated the invocation of spyOn function should occur in Jest

Question

Anticipated the invocation of spyOn function should occur in Jest

Having trouble testing my methods and getting stuck with my if statement not being called. I'm new to Jest, so I have a feeling it's just a simple mistake on my end.

 describe('isSingleScreen', () => {
    beforeEach(() => {
      jest.clearAllMocks();
      jest.spyOn(utilMethods, 'isDualScreen').mockReturnValue(true);
    });

    it('autoScreenAdd', () => {
      // Arrange
      const singleScreenAddSpy = jest.spyOn(
        singleScreenMethods,
        'singleScreenAdd'
      );
      const dualScreenAddSpy = jest.spyOn(dualScreenMethods, 'dualScreenAdd');

      // Act
      utilMethods.autoScreenAdd({});

      // Assert
      expect(singleScreenAddSpy).toBeCalledTimes(0);
      expect(dualScreenAddSpy).toBeCalled();
      expect(dualScreenAddSpy).toBeCalledTimes(1);
    });
  });

export const isDualScreen = (): boolean => {
  return Dimensions.get('window').width > 1000 ? true : false;
};

export const autoScreenAdd = (element: IDualComponent) => {
  if (isDualScreen()) {
    dualScreenAdd(element);
  } else {
    singleScreenAdd(element);
  }
};

Encountering the following error:

    expect(jest.fn()).toBeCalledTimes(expected)

    Expected number of calls: 0
    Received number of calls: 1

      30 |       // Assert
      31 |       expect(autoScreenAddSpy).toBeCalled();
    > 32 |       expect(singleScreenAddSpy).toBeCalledTimes(0);
         |                                  ^
      33 |       expect(dualScreenAddSpy).toBeCalled();
      34 |       expect(dualScreenAddSpy).toBeCalledTimes(1);
      35 |     });

reactjs typescript react-native testing jestjs

Answer 1

Answer №1

When testing a module that contains functions calling other functions within the same module, there are limitations to consider. For further insight on this topic, you can refer to this informative article. The article discusses various workarounds that may be suitable for your code structure.

Example in Action:

View CodeSandbox Example

Utility Functions

We have slightly modified the original utility functions. If needed, you can adapt your utility modules accordingly based on this example.

const isDualScreen = () => {
  return window.width > 1000 ? true : false;
};

const autoScreenAdd = element => {
  if (utilMethods.isDualScreen()) {
    utilMethods.dualScreenAdd(element);
  } else {
    utilMethods.singleScreenAdd(element);
  }
};

const dualScreenAdd = element => {
  return element;
};

const singleScreenAdd = element => {
  return element;
};

// Ensure proper function mocking in tests by following this structure.
// Repeat this pattern for modules like singleScreenMethods and dualScreenMethods
const utilMethods = {
  singleScreenAdd,
  dualScreenAdd,
  autoScreenAdd,
  isDualScreen
};

export default utilMethods;

Testing Scenario

import utilMethods from "./utils";

describe("isSingleScreen", () => {
  beforeEach(() => {
    jest.clearAllMocks();
    jest.spyOn(utilMethods, "isDualScreen").mockReturnValue(true);
  });

  it("autoScreenAdd", () => {
    // Arrange
    const singleScreenAddSpy = jest.spyOn(utilMethods, "singleScreenAdd");
    const dualScreenAddSpy = jest.spyOn(utilMethods, "dualScreenAdd");

    // Act
    utilMethods.autoScreenAdd({});

    // Assert
    expect(singleScreenAddSpy).toHaveBeenCalledTimes(0);
    expect(dualScreenAddSpy).toHaveBeenCalledTimes(1);
  });
});

Answer 2

When testing a module that contains functions calling other functions within the same module, there are limitations to consider. For further insight on this topic, you can refer to this informative article. The article discusses various workarounds that may be suitable for your code structure.

Example in Action:

View CodeSandbox Example

Utility Functions

We have slightly modified the original utility functions. If needed, you can adapt your utility modules accordingly based on this example.

const isDualScreen = () => {
  return window.width > 1000 ? true : false;
};

const autoScreenAdd = element => {
  if (utilMethods.isDualScreen()) {
    utilMethods.dualScreenAdd(element);
  } else {
    utilMethods.singleScreenAdd(element);
  }
};

const dualScreenAdd = element => {
  return element;
};

const singleScreenAdd = element => {
  return element;
};

// Ensure proper function mocking in tests by following this structure.
// Repeat this pattern for modules like singleScreenMethods and dualScreenMethods
const utilMethods = {
  singleScreenAdd,
  dualScreenAdd,
  autoScreenAdd,
  isDualScreen
};

export default utilMethods;

Testing Scenario

import utilMethods from "./utils";

describe("isSingleScreen", () => {
  beforeEach(() => {
    jest.clearAllMocks();
    jest.spyOn(utilMethods, "isDualScreen").mockReturnValue(true);
  });

  it("autoScreenAdd", () => {
    // Arrange
    const singleScreenAddSpy = jest.spyOn(utilMethods, "singleScreenAdd");
    const dualScreenAddSpy = jest.spyOn(utilMethods, "dualScreenAdd");

    // Act
    utilMethods.autoScreenAdd({});

    // Assert
    expect(singleScreenAddSpy).toHaveBeenCalledTimes(0);
    expect(dualScreenAddSpy).toHaveBeenCalledTimes(1);
  });
});

Anticipated the invocation of spyOn function should occur in Jest

Answer №1

Example in Action:

Utility Functions

Testing Scenario

Similar questions

The Cordova InAppBrowser plugin has not been properly set up

Delivering compressed files in a React server

Steps to trigger a dialog to appear automatically within an Icon Menu with React Material UI

Adjust property value based on changes in a related property

React component is failing to re-render after updating state

In the production and development environments, the interpretation of CSS classnames is being rearranged

Utilizing *ngFor to display elements with odd indices

Encountering an issue such as "Exceeding the maximum number of re-renders. React restricts the amount of renders to avoid

The Angular TypeScript lexicon scope becomes obscured when nested within a third-party API event handler function

Material UI transitions between states when an individual item from the ItemList is clicked

Is it possible to include pseudo element elements in the configuration of a custom theme in Material UI?

React : Installation from NPM is unsuccessful

Implement the useEffect() function to handle the loading of external JavaScript on the client-side, replicating the

Deactivating toolbar in material table in ReactJS while maintaining default functionalities

Deriving union type in Typescript from values within a module or object

The attribute 'attribs' is not found on the 'Element' type in cheerio

Encountering an issue upon launching a new next.js project

What is the best method for storing dynamic values and attribute labels in a state within a React.js application?

Triggering multiple functions by clicking on the Icon

The rule 'import/no-cycle' definition could not be located