jestjs – Page 3 – Tarik Billa

jest.mock() doesn’t work inside tests, only outside tests

April 1, 2024 by Tarik

Use mockReturnValue(…) import { getCallingCode, hasSupport, } from ‘utils/countryCallingCode’ jest.mock(‘utils/countryCallingCode’, () => ({ getCallingCode: jest.fn(), hasSupport: jest.fn(), })) describe(‘…’, () => { it(‘…’, () => { getCallingCode.mockReturnValue(1) hasSupport.mockReturnValue(false) expect(… }) it(‘…’, () => { getCallingCode.mockReturnValue(0) hasSupport.mockReturnValue(true) expect(… }) }) Dealing with default export from that util: import theUtil from ‘utils/theUtil’ jest.mock(‘utils/theUtil’, () => ({ __esModule: … Read more

How do you change the behaviour of a mocked import in Jest?

March 15, 2024 by Tarik

After you’ve mocked the module and replaced the methodToMock with a spy, you need to import it. Then, at each test, you can change the behaviour of methodToMock by calling the mockImplementation spy method. jest.mock(‘the-package-to-mock’, () => ({ methodToMock: jest.fn() })) import { methodToMock } from ‘the-package-to-mock’ it(‘Test A’, () => { methodToMock.mockImplementation(() => ‘Value … Read more

How to fireEvent.scroll on a element inside container with react-testing-library?

January 9, 2024 by Tarik

Have you tried adding EventListener to your scroll container? I’m just not sure with that library you may have just used, but I’m pretty sure, in normal situations, calling scroll fireEvent without listener won’t execute anything. Before your fireEvent, insert something like this: scrollContainer.addEventListener(‘scroll’, () => { /* some callback */ }); and change your … Read more

jest: How to teardown after (just) an individual test

January 9, 2024 by Tarik

In many cases tests can share a common afterEach clean-up even if it’s needed for one of them, as long as it doesn’t affect others. Otherwise, this is what block structure is responsible for. One or several tests can be grouped with nested describe just to have their own afterEach, etc blocks, and the only … Read more

How can I test a change handler for a file-type input in React using Jest/Enzyme?

January 8, 2024 by Tarik

This answers shows how to access all of the different parts of the code using jest. However, it doesn’t necessarily mean that one should test all of these parts this way. The code-under-test is essentially the same as in the question except that I have substituted addEventListener(‘load’, … for onload = …, and I have … Read more

How to test url change with Jest

January 8, 2024 by Tarik

I found a working method by declaring in the beginning of the test a global variable: global.window = { location: { pathname: null } }; and checked this variable like this: expect(global.window.location.pathname).toContain(‘/new-url’); That worked fine.

Jest Difference Between toBeCalledWith and toHaveBeenCalledWith

January 6, 2024 by Tarik

From the docs https://jestjs.io/docs/en/expect#tohavebeencalledwitharg1-arg2- .toHaveBeenCalledWith(arg1, arg2, …) under the alias: .toBeCalledWith() From the source code: https://github.com/facebook/jest/blob/b7cb5221bb06b6fe63c1a5e725ddbc1aaa82d306/packages/expect/src/spyMatchers.ts#L1128 https://github.com/facebook/jest/blob/b7cb5221bb06b6fe63c1a5e725ddbc1aaa82d306/packages/expect/src/spyMatchers.ts#L1131 //… toBeCalledWith: createToBeCalledWithMatcher(‘toBeCalledWith’), toHaveBeenCalled: createToBeCalledMatcher(‘toHaveBeenCalled’), toHaveBeenCalledTimes: createToBeCalledTimesMatcher(‘toHaveBeenCalledTimes’), toHaveBeenCalledWith: createToBeCalledWithMatcher(‘toHaveBeenCalledWith’), //… They are created by the createToBeCalledWithMatcher function with only a different name. So, they are the same. UPDATE: Here is my personal understanding of why jestjs provide these … Read more

Vue Cli unit test with jest how to run single test

January 5, 2024 by Tarik

If you want to execute only single file then simply do: npm run test:unit -t counter OR npm run test:unit counter Whereas counter.spec.js is the my test file.

stubbing a function using jest

January 3, 2024 by Tarik

With jest you should use jest.spyOn: jest .spyOn(jQuery, “ajax”) .mockImplementation(({ success }) => success([ 1, 2, 3 ])); Full example: const spy = jest.fn(); const payload = [1, 2, 3]; jest .spyOn(jQuery, “ajax”) .mockImplementation(({ success }) => success(payload)); jQuery.ajax({ url: “https://example.api”, success: data => spy(data) }); expect(spy).toHaveBeenCalledTimes(1); expect(spy).toHaveBeenCalledWith(payload); You can try live example on codesandbox: … Read more

How to fetch element with ‘name’ attribute in react-testing-library

January 2, 2024 by Tarik

You can use the returned container. The container is a DOM node and supports the querySelector method, which accepts a CSS selector to find an element. Same approach as in this more detailed answer. For example: const { container } = render(<MyComponent />); const inputEl = container.querySelector(`input[name=”userName”]`);