Jest failure when importing from `@remix-run/react` in a `cjs` project

[paul-vd]

Reproduction

https://github.com/front-commerce/reproduction-remix-cjs-jest

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 39.33 GB / 47.01 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.8.0 - ~/.local/share/pnpm/pnpm
    bun: 1.0.0 - ~/.bun/bin/bun
  npmPackages:
    @remix-run/css-bundle: ^2.4.1 => 2.4.1
    @remix-run/dev: ^2.4.1 => 2.4.1
    @remix-run/node: ^2.4.1 => 2.4.1
    @remix-run/react: ^2.4.1 => 2.4.1
    @remix-run/serve: ^2.4.1 => 2.4.1

Used Package Manager

pnpm

Expected Behavior

The test should pass.

Actual Behavior

When importing from @remix-run/react in a cjs project, the jest test fails with the following error:

 FAIL  tests/reproduction.spec.tsx
  ● 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:

    /Projects/reproduction/remix-jest-test/node_modules/.pnpm/@web3-storage+multipart-parser@1.0.0/node_modules/@web3-storage/multipart-parser/esm/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import {
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { render, screen } from "@testing-library/react";
      2 | // 1️⃣→ COMMENT OUT THE NEXT LINE
    > 3 | import { Link } from "@remix-run/react";
        | ^
      4 |
      5 | // 2️⃣→ UNCOMMENT THIS CODEBLOCK
      6 | // const Link = ({ children, to = "" }: { children: any; to: string }) => {

      at Runtime.createScriptFromCode (node_modules/.pnpm/jest-runtime@29.7.0/node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (tests/reproduction.spec.tsx:3:1)

[caprica]

Just to add some context, I had similar tests working on 2.4.1, but after after migrating to 2.5.1 I see the same error given above when trying to import Link in my tests.

[paul-vd]

Any news on this? it seems like posting issues don't get much ❤️, I have some other issues posted since November without any feedback.

[altonchaney]

I ran into the same issue going from 2.2.0 -> 2.5.1 as part of our Hydrogen upgrade. On our end we solved this for now using a full jest mock of this package. Not ideal but it unblocks us for now. I'm also hoping for a more official solve here if that's possible.

[paul-vd]

@altonchaney can you maybe share your gist with your mock implementation?

[milanpoliak]

Happening on 2.8.1 too

[altonchaney]

@paul-vd sorry for the delayed response, here's what I've come up with. https://gist.github.com/altonchaney/e7417468e9d42a1e5978e32b0cec19d7 Again, not ideal but it's working and we are able to update the mocks as needed

[wiesenklee]

2.9.2 still not working

[Tyrannogina]

2.10.0 and same issue.

I tried downgrading the dependency version to 2.4.1 (as @caprica said it was working for them on that version), but it still doesn't work for me in that version (it's a peer dependency on a component library, and I only depend on the Link component for some tests, so I could have run the tests in 2.4 even if the actual code runs with the latest version).

I applied the fix that @altonchaney offered, but it would be good to not need mocks!