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