Jest tests fail for missing module

[sungyeonu]

Steps to reproduce

Link to live example: (required)

Steps:

1. Install Toolpad and MUI libraries

• @toolpad/core 0.8.1
• @toolpad/utils 0.8.1
• mui/material 6.1.6
• mui/icons-material 6.1.6

2. Render <AppProvider/> and <DashboardLayout/> in code
3. See all related tests fail

Current behavior

Adding <AppProvider/> and <DashboardLayout/> components cause local tests to fail.

For failing tests we see either of these two messages:

Cannot find module '@toolpad/utils/react' from 'node_modules/@toolpad/core/node/useNotifications/NotificationsProvider.js'`

Require stack:
node_modules/@toolpad/core/node/useNotifications/NotificationsProvider.js
node_modules/@toolpad/core/node/useNotifications/index.js
node_modules/@toolpad/core/node/AppProvider/AppProvider.js
node_modules/@toolpad/core/node/AppProvider/index.js
node_modules/@toolpad/core/node/index.js
... 

or

Expected behavior

Tests do not fail

Context

Our team is trying to leverage AppProvider and DashboardLayout components to build our Navigation Bar component. We are using: @testing-library/jest-dom version 5.17. Upon importing and using these components in our code, we immediately see our tests fail.

As more context, our node_modules/@toolpad/ Does not have useNotifications/. It seems our tests are failing because of this, although in nowhere in the code or tests we are using that hook.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: useNotifications, Jest, AppProvider, DashboardLayout

[bharatkashyap]

As more context, our node_modules/@toolpad/ Does not have useNotifications/.

This shouldn't be happening. Is there any chance you are able to create a minimal sandbox reproduction to help us debug this?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[viktormalik]

Hi, I'm getting the same failure when using create-react-app with AppProvider and Jest.

Here's the minimal reproducer that I was able to come up with:

$ npx create-react-app test
$ cd test
$ npm install "@toolpad/core"
$ echo "import { AppProvider } from '@toolpad/core/AppProvider';" > src/App.test.jsx
$ npm test

This fails on a different error.

Error detail

 FAIL  src/App.test.jsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/vmalik/tmp/test/test/node_modules/@toolpad/core/AppProvider/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from "./AppProvider.js";
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

    > 1 | import { AppProvider } from '@toolpad/core/AppProvider';
        | ^
      2 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/App.test.jsx:1:1)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.48 s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.
 › Press f to run only failed tests.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.
(node:563963) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node-22 --trace-deprecation ...` to show where the warning was created)

I'm able to solve this one by updating package.json:

diff --git a/package.json b/package.json
index 99b979b..e42bfda 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +15,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@toolpad)\"",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

Then, npm test runs to yet another error.

Error details

 FAIL  src/App.test.jsx
  ● Test suite failed to run

    Cannot find module '@emotion/styled' from 'node_modules/@mui/styled-engine/node/index.js'

    Require stack:
      node_modules/@mui/styled-engine/node/index.js
      node_modules/@mui/system/index.js
      node_modules/@mui/material/node/styles/adaptV4Theme.js
      node_modules/@mui/material/node/styles/index.js
      node_modules/@toolpad/core/AppProvider/AppProvider.js
      node_modules/@toolpad/core/AppProvider/index.js
      src/App.test.jsx

    > 1 | import { AppProvider } from '@toolpad/core/AppProvider';
        | ^
      2 |

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (node_modules/@mui/styled-engine/node/index.js:47:38)
      at Object.<anonymous> (node_modules/@mui/system/index.js:398:21)
      at Object.<anonymous> (node_modules/@mui/material/node/styles/adaptV4Theme.js:7:15)
      at Object.<anonymous> (node_modules/@mui/material/node/styles/index.js:315:44)
      at Object.<anonymous> (node_modules/@toolpad/core/AppProvider/AppProvider.js:5:1)
      at Object.<anonymous> (node_modules/@toolpad/core/AppProvider/index.js:1:1)
      at Object.<anonymous> (src/App.test.jsx:1:1)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.483 s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.
 › Press f to run only failed tests.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.
(node:564361) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node-22 --trace-deprecation ...` to show where the warning was created)

I can solve this one, too, with:

$ npm install "@emotion/styled"

And after that, npm test fails with the error described in this issue.

Error details

 FAIL  src/App.test.jsx
  ● Test suite failed to run

    Cannot find module '@toolpad/utils/react' from 'node_modules/@toolpad/core/useNotifications/NotificationsProvider.js'

    Require stack:
      node_modules/@toolpad/core/useNotifications/NotificationsProvider.js
      node_modules/@toolpad/core/useNotifications/index.js
      node_modules/@toolpad/core/AppProvider/AppProvider.js
      node_modules/@toolpad/core/AppProvider/index.js
      src/App.test.jsx

    > 1 | import { AppProvider } from '@toolpad/core/AppProvider';
        | ^
      2 |

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (node_modules/@toolpad/core/useNotifications/NotificationsProvider.js:5:1)
      at Object.<anonymous> (node_modules/@toolpad/core/useNotifications/index.js:2:1)
      at Object.<anonymous> (node_modules/@toolpad/core/AppProvider/AppProvider.js:6:1)
      at Object.<anonymous> (node_modules/@toolpad/core/AppProvider/index.js:1:1)
      at Object.<anonymous> (src/App.test.jsx:1:1)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.937 s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.
 › Press f to run only failed tests.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.
(node:564518) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node-22 --trace-deprecation ...` to show where the warning was created)

I tried npm install "@toolpad/utils" but that didn't help.

[oliviertassinari]

A quick look. The code is imported like this:

toolpad/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx

Line 14 in e1d76c0

import { useNonNullableContext } from '@toolpad/utils/react';

but then, @toolpad/utils exposes its source like this: https://unpkg.com/browse/@toolpad/[email protected]/.

Does Jest support package.json exports field? I saw jestjs/jest#9771 unclear.

[Janpot]

Can reproduce this locally. I see similar issues when I try with the upcoming base-ui packages. Will investigate if there's a way to remedy in jest config.

[Janpot]

Looks like I can get it to work by adding extra jest config in the package.json:

// package.json
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(@toolpad/)).*\\..*$"
    ],
    "moduleNameMapper": {
      "@toolpad/utils/(.*)": "@toolpad/utils/dist/$1"
    }
  },

But I wouldn't recommend it. Be warned if you use this: This will guaranteed break some day on a patch dependency upgrade.

IIUC upcoming base UI module layout will also rely on the exports field to locate its sources. I assume it will also be broken the same way in CRA/jest. cc @mui/base-ui