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

[wamujlb]

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();

[wamujlb]

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

[sandinosaso]

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.

[wamujlb]

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

use like:

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

[sandinosaso]

@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.

[wamujlb]

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> .

[sandinosaso]

@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

[wamujlb]

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> .

[papuruth]

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

[ozluy]

--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;
};```