vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.87k stars 26.97k forks source link

Jest Manual mocks stopped working in 13.2.4 #48012

Open adam187 opened 1 year ago

adam187 commented 1 year ago

Verify canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Thu Sep 29 20:13:56 PDT 2022; root:xnu-8020.240.7~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.2
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.32
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Jest (next/jest)

Link to the code that reproduces this issue

https://github.com/adam187/with-jest-app/tree/not-mocked

To Reproduce

  1. clone the repo
  2. install dependencies (yarn install)
  3. run tests (yarn test)

useTest hook should be automatically mocked from mocks root level folder.

Describe the Bug

Looks like that after upgrading to next.js@13.2.4 https://jestjs.io/docs/manual-mocks stopped working.

Mapping modules without moduleNameMapper works as expected but manual mocks are not resolved instead of real modules.

On version 13.2.3 it's still working as expected: https://github.com/adam187/with-jest-app

Possible source: https://github.com/vercel/next.js/pull/45815

Expected Behavior

Manual mocks should still be loaded and work as described in https://jestjs.io/docs/manual-mocks

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

IrinaSTA commented 1 year ago

We have the same problem. It's caused by this commit in 13.2.4 https://github.com/vercel/next.js/pull/45815/files#diff-c22885d97fa21ad974a3f5f982d92b6f45edc251fd34bc14223492ebd7391245

We have path mapping set up in tsconfig.json, and matching path aliases in jest.config.ts in moduleNameMapper. The only way we can get the mocking to work now is to either remove path mapping in tsconfig, or change all our unit tests to use relative paths. It's blocking us from upgrading, which is unfortunate as we really need this fix in 13.3.1 https://github.com/vercel/next.js/pull/48039

UPDATE: we found we could get manual mocks to work again by moving them directly next to the modules they were mocking. So using code that reproduces the issue above as an example - placing the mock in hooks/__mocks/useTest.ts, removing \mocks__ folder from the root, and adding jest.mock("@/hooks/useTest") to the test ensures that the test passes.

adam187 commented 1 year ago

Did some digging today and looks like it's caused by providing dir path https://github.com/adam187/with-jest-app/blob/not-mocked/jest.config.js#L5 that sets the resolvedBaseUrl that configures paths for swc compiler https://github.com/vercel/next.js/blob/f3cb952873600c3fe14c85fd21086efe3a9d8175/packages/next/src/build/swc/options.ts#L84-L88

when I remove dir then the manual mocking works as before.