vitest-react-native icon indicating copy to clipboard operation
vitest-react-native copied to clipboard

add support for react-native 0.79

Open cristianbogdan opened this issue 7 months ago • 4 comments

After applying workarounds mentioned at #15 , React-native 0.76 works but testing with expo 53 (which requires react-native 0.79) fails with

TypeError: Cannot read properties of undefined (reading 'NativeReactNativeFeatureFlagsCxx')
 ❯ requireModule node_modules/react-native/Libraries/TurboModule/TurboModuleRegistry.js:45:39
 ❯ Object.get node_modules/react-native/Libraries/TurboModule/TurboModuleRegistry.js:53:10
 ❯ Object.<anonymous> node_modules/react-native/src/private/featureflags/specs/NativeReactNativeFeatureFlags.js:34:59
 ❯ Module._compile node_modules/pirates/lib/index.js:129:24
 ❯ Object.newLoader [as .js] node_modules/pirates/lib/index.js:134:7

I investigated a bit but all the react-native modules mentioned in the stacktrace seem to be identical in 0.76 and 0.79. So I guess that something else causes this.

cristianbogdan avatar May 09 '25 23:05 cristianbogdan

I tried these mocks made by @subtleGradient

https://github.com/nkzw-tech/expo-app-template/issues/8

and while they avoid the first error (about the NativeReactNativeFeatureFlagsCxx module), they lead to errors like this

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Text`.

This probably means that the vitest-react-native mocks don't work any longer

To remove the warnings generated by each missing module, I had to mock these modules:

  • NativeAnimatedModule
  • FrameRateLogger
  • KeyboardObserver

I also noticed that the above "react-native/Libraries/TurboModule/TurboModuleRegistry" mock has no effect.

cristianbogdan avatar May 12 '25 23:05 cristianbogdan

I was previously running into issues with an undefined read of PlatformConstants, but the above fix worked perfectly! Thanks for linking; you probably saved me several hours of debugging.

nathan-ahn avatar May 13 '25 00:05 nathan-ahn

@nathan-ahn happy i could help.

Are you able to test RN code with RN 0.79 and vitest?

I am not, most standard RN components like Text, ScrollView return undefined.

Maybe you could share your mocks? Thanks in advance!

cristianbogdan avatar May 13 '25 06:05 cristianbogdan

@cristianbogdan I'm using the same mocks that you linked. This is with Vitest v1.6.1 and React Native v0.79.2. (Though this made me realize how out of date our Vitest version is, so I've just upgraded and can confirm working with v3.1.3).

Unfortunately, I can't help much with the RN components. We only use Vitest for hook testing and intentionally avoid trying to test any components in our integration tests (instead opting for full end-to-end browser tests). Best of luck!

nathan-ahn avatar May 13 '25 14:05 nathan-ahn