Tests after upgrading [react-scripts] to version 4 fail

Describe the bug

After updating react-scripts to version 4+ more than half of the tests started to fail. But if I run any of the failing tests in VSCode or from jest they don't fail and work as before.

Looks like any of the mocks I use in my ./src/setupTests.ts file aren't picked up when I run react-scripts test.

Did you try recovering your dependencies?

Yes. I did.

Which terms did you search for in User Guide?

They are not related to the issue.

Environment

System:
OS: macOS 11.1
CPU: (8) x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
Binaries:
Node: 15.8.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/Cellar/node/15.8.0/bin/yarn
npm: 7.5.0 - /usr/local/Cellar/node/15.8.0/libexec/bin/npm
Browsers:
Chrome: 88.0.4324.182
Firefox: Not Found
Safari: 14.0.2
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: ^4.0.2 => 4.0.2
npmGlobalPackages:
create-react-app: 4.0.2

Steps to reproduce

Expected behavior

Tests shouldn't fail and work the same way as they work using Jest

Actual behavior

Failing test which uses mocked localStorage:

Failing test which uses mocked version of window.open:

Failing test which uses redux (I don't mock redux, use the same createStore function which already has thunk middleware):

setupTests.ts

import 'jest-localstorage-mock';
import '@testing-library/jest-dom';
import 'jest-date-mock';
import './test-helpers/react-i18next.mock';

window.scrollTo = jest.fn();
window.open = jest.fn();

Found an issue. From 4+ version of react-scripts --resetMocks is true by default. Fixed it by making react-scripts test --resetMocks=false.

I am not sure why, but this same makes my tests break passing --resetMocks=false solved it.

I am interested in knowing why this is happening.

What I do in some tests is mock a library (private) that export SDK class, in the code we use it like this:

import { SDK } from '@lets-talk/apps-sdk';
const lib = new SDK();

Then we call methods on it (i.e lib.getAppSettings(), etc) ... I mock those methods for testing purposes the following way:

const mockGetAppSettings = jest.fn(() => {});
jest.mock('@lets-talk/apps-sdk', () => ({
  SDK: jest.fn(() => ({
    getAppSettings: jest.fn((...args) => mockGetAppSettings(...args)),
  })),
}));

The error I see it is `Error: Uncaught [TypeError: this.AppsSDK.getAppSettings is not a function]``
So it is like the mock is not working (this is related to the flag resetMocks=false but how??)

I can not see what the problem here is.
I see that SDK is jest.mockConstructor and it has nothing on it (as the methods I mocked were not mocked at all)

If someone can point out what was going on here I really appreciate any kind of advice.
Regards.

@sandinosaso

@sandinosaso Could you please try to remove this:
mockGetAppSettings(...args)

use like:

getAppSettings: jest.fn((...args) => {}),

@wamujlb

@wamujlb I tried as you suggested and without the --resetMocks flag it fails the same way, it says getAppSettings is not a function. Thank you anyway, I am still curious why the mock of the class constructor does not work without that flag, even in that simple case you provided.

Could you please create an example in codesandbox and include your jest config as well.

…

On Thu, May 20, 2021, 19:43 Sandino ***@***.***> wrote: @wamujlb <https://github.com/wamujlb> I tried as you suggested and without the --resetMocks flag it fails the same way, it says getAppSettings is not a function. Thank you anyway, I am still curious why the mock of the class constructor does not work without that flag, even in that simple case you provided. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10571 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADRW5VCVYTKX3DKPS7R4IWLTOVC4ZANCNFSM4XYUWRGQ> .

@wamujlb

@wamujlb I did it, but seems that codesanbox does not support jest.mock :( ...Do you know any other live coding tool that does?

https://codesandbox.io/s/test-jestmock-j9xqt

Thank you in advance for your help

No, I meant just give me the whole example so I can copy it and try it locally.

…

On Thu, May 20, 2021, 20:19 Sandino ***@***.***> wrote: @wamujlb <https://github.com/wamujlb> I did it, but seems that codesanbox does not support jest.mock :( ...Do you know any other live coding tool that does? https://codesandbox.io/s/test-jestmock-j9xqt Thank you in advance for your help — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10571 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADRW5VEWMDCKHPYTAJAFHRLTOVHEDANCNFSM4XYUWRGQ> .

It seems after using resetMocks: false the jest.spyOn is not working at all.
Code snippet that fails

// Spying and mocking
jest.spyOn(viqMES, 'getSuggestedPeopleService').mockImplementation(() =>Promise.resolve(// some response));

// Assertion
expect(viqMES.getSuggestedPeopleService).toHaveBeenCalledTimes(1);

The assertion fails with
Expected number of calls: 1
Received number of calls: 0

--resetMocks=false flag and override with react-app-rewired worked for me

// config-overrides.js
module.exports.jest = (config) => {
  config.testRunner = 'jest-jasmine2';
 return config;
};```

Navigation Menu

Repository navigation

Tests after upgrading [react-scripts] to version 4 fail #10571

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

setupTests.ts

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Tests after upgrading [react-scripts] to version 4 fail #10571

Description

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

setupTests.ts

Activity

wamujlb commented on Feb 24, 2021

sandinosaso commented on May 20, 2021

wamujlb commented on May 20, 2021

sandinosaso commented on May 20, 2021

wamujlb commented on May 20, 2021

sandinosaso commented on May 20, 2021

wamujlb commented on May 20, 2021

papuruth commented on Oct 4, 2021

ozluy commented on Oct 22, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions