node_modules Mocks are not picked up by jest with latest react-scripts

[tomitrescak]

Describe the bug

When upgrading from react-scripts@3.0.1 to latest the mocks are no longer picked up from /__mocks__ directory

Did you try recovering your dependencies?

YES

Which terms did you search for in User Guide?

jest manual mocks broken

Environment

Environment Info:

System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Binaries:
Node: 12.8.0 - /usr/local/bin/node
Yarn: 1.17.3 - ~/.yarn/bin/yarn
npm: 6.10.2 - /usr/local/bin/npm
Browsers:
Chrome: 76.0.3809.100
Firefox: 68.0.1
Safari: 12.1.1
npmPackages:
react: ^16.9.0 => 16.9.0
react-dom: ^16.9.0 => 16.9.0
react-scripts: 3.1.1 => 3.1.1
npmGlobalPackages:
create-react-app: 2.1.3

Steps to reproduce

(Write your steps here:)

1. create a manual mock of any node_modules package
2. put it to mocks directory
3. run your test

Expected behavior

Mocks are picked up by jest

Actual behavior

Mocks are not picked up

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

1. git clone https://github.com/tomitrescak/react-boilerplate -b Demo
2. cd react-boilerplate
3. yarn
4. yarn test
5. p -> 'button'
6. error: Trans not found (not being picked up by mocks)

To see that is works with previous react-scripts do

1. yarn add react-scripts@3.0.1
2. yarn test
3. You will recieve a snapshot erro which is fine

[FezVrasta]

I can't reproduce this with 3.1.1, we have a __mocks__ folder under src/ with 2 different mocks (one of a node module and one of an internal module) and they both work

[jnak]

@FezVrasta __mocks__ for node modules should be located immediately next to the node_modules directory.

https://jestjs.io/docs/en/manual-mocks#mocking-node-modules

[ianschmitz]

This may have been caused by #7480.

[jnak]

This is problematic because __mocks__ for user modules may collide with the __mocks__ for node_modules.

If we're not going to revert #7480, I feel we should at least document the new jest source since it is not standard and document the risk of collision.

[FezVrasta]

@jnak even under src the mocks work just fine. I always did it that way

[jnak]

@jnak even under src the mocks work just fine. I always did it that way

I know they work. But it is not standard (as per the jest documentation) and you may be running into a __mocks__ collision.

Anyway, I don't feel strongly about it. I just wanted to let you know of this undocumented gotcha.

[tomitrescak]

What to do guys? Shall we just move the mocks to src folder and hope for no collisions? We only have about 3-4 projects to upgrade.

[ultimagriever]

Honestly I think #7480 should be reverted, or at least just let us set the roots config in our package.json so we can avoid anti-patterns like this.

[tomitrescak]

No pressure, but would be good to know the decision if we should move the mocks to upgrade. Thanks!

[ianschmitz]

We may be able to specify __mocks__ living in the project root as another entry in the roots configuration. If someone has time could they try this? This may be a good solution to keep the performance benefits of #7480 and supporting the __mocks__ next to node_modules convention.

[ultimagriever]

@ianschmitz I've tried adding the project root to the roots configuration in package.json, but CRA threw an error saying that it wasn't supported and didn't run my tests at all.

[ianschmitz]

Correct - we don't support modifying roots. What you'll have to do test this is edit the createJestConfig.js file in node_modules/react-scripts as was done here: https://github.com/facebook/create-react-app/pull/7480/files#diff-40a56a7d41499eab85303b5e977f9742.

Try something like:

{
  roots: ['<rootDir>/src', '<rootDir>/__mocks__'],
  ...
}