Compatibility with @testing-library/react-native

[wojtekmaj]

As soon as I setup app using @testing-library/react-native, I get:

SyntaxError: Cannot use import statement outside a module
 ❯ Object.<anonymous> node_modules/@testing-library/react-native/src/helpers/format-default.ts:1:1

Module /node_modules/react-native/index.js:14 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "react-native" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    server: {
      deps: {
        inline: [
          "react-native"
        ]
      }
    }
  }
}

I previously raised #5 and closed it, but it seems the same issue is now "passed over" to @testing-library/react-native.

[wojtekmaj]

It seems the issue might be:

var _reactNative = require("react-native");

[berdyshev]

is there any updates on that issue?

[camilossantos2809]

I'm having a similar problem, but with other dependency:

SyntaxError: Cannot use import statement outside a module
 ❯ Object.newLoader [as .js] node_modules/pirates/lib/index.js:121:7

[Lili0114]

I have the same error message except it appears for a firebase import, I tried a lot of things, but nothing seems to work.

[YuriiLutsykSPRO]

The same issue, we can't add any related configs to react native library (as @testing-library/react-native or react-native-unistyles) to the setup file in vitest.config. It's really a big blocker

[timheilman]

In the jest world, this type of ESM/CJS modules dependency mismatch error is managed via package.json configuration:

{ ...
  "jest": {
    ...
    "transformIgnorePatterns": [ ... ]
   }
}

I am just getting started trying to integrate vitest with react-native and react-native-testing-library. All I have done is some web searches on the topic. Before I get started with attempting the integration, I wanted to ask if there is a similar configuration requirement for vitest to manage dependencies using either ESM or CJS module syntax?

[timheilman]

source-diving, I am encouraged to see there is some code already in this repo to handle esm/cjs issues: https://github.com/sheremet-va/vitest-react-native/blob/21276b8bb4c43eddd4a8e62f7c74e6dcb94bb24c/packages/vitest-react-native/setup.js#L54-L64

[shtefanilie]

Any updates? Has anyone attempted this?
I personally tried adding vitest, and when trying to run a test I am getting

SyntaxError: Cannot use import statement outside a module
 ❯ Object.<anonymous> node_modules/@testing-library/react-native/src/helpers/format-default.ts:1:1

[billsbooth]

Has anyone been able to get this to work?

[cristianbogdan]

I suspect that this issue is related to more recent Node versions, which try to automatically discover whether a package is CJS or ESM. react-native appears to be ESM but it is CJS

Since Node changed behavior in this regard, react-native should declare explicitly "type":"commonjs", and I have filed this issue for that.

react/react-native#50052

I found two workarounds

1. change node-modules/react-native/package.json and add "type":"commonjs"
2. run the test script with a node option "test": "NODE_OPTIONS='--no-experimental-detect-module' vitest"

[srsholmes]

If you're looking for @testing-library/react-native compatibility with vitest — I wrote an alternative plugin that was built with this in mind:

https://github.com/srsholmes/vitest-react-native

Should work out of the box with RNTL. Hope it helps!