Fail to run Jest testing

[cedricfressin]

Description

When I run Jest test suites, I got this error, due to usage under the hood of react-native-nitro-modules:

Failed to get NitroModules: The native "NitroModules" Turbo/Native-Module could not be found.
    * Make sure react-native-nitro-modules/NitroModules is correctly autolinked (run `npx react-native config` to verify)
    * Make sure you enabled the new architecture (TurboModules) and CodeGen properly generated the "NativeNitroModules"/NitroModules specs. See https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-apps.md
    * Make sure you are using react-native 0.75.0 or higher.
    * Make sure you rebuilt the app.
    * Make sure you ran `expo prebuild`.
    * Make sure you ran `pod install` in the ios/ directory.

Is there any Jest preset to use, I haven't find any in this repo/docs or on react-native-nitro-modules

Steps to Reproduce

1. Create an Expo project
2. Install and configure react-native-unistyles@beta
3. Run yarn expo prebuild --clean
4. Run any test suites with Jest that contains JSX

Snack or Repository Link (Optional)

No response

Unistyles Version

3.0.0-beta.1

React Native Version

0.76.3

Platforms

Android, iOS, Web

Expo

Yes

[jpudysz]

I don't think there is any. It's also too early for me to invest time in preparing such an example.
I will definitely do it later during the RC phase. Keeping this issue for future reference.

[rkrv]

@jpudysz Any suggestions on getting Jest tests configured with the new Unistyles? I am so close 🤏 to upgrading my project to the new arch, and this is the final blocker that I know of.

[jpudysz]

Follow errors and try to mock the structure. If you get error from UnistylesRuntime then create empty UnistylesRuntime object and so on.

[rkrv]

Ended up with this:

// jest.config.js
module.exports = {
  moduleNameMapper: { 'react-native-unistyles': '<rootDir>/__mocks__/react-native-unistyles.js' },
  setupFiles: ['<rootDir>/jest.setup.js'],
  // ...
};

// jest.setup.js
import './unistyles'; // <-- File that initializes Unistyles

// __mocks__/react-native-unistyles.js
// You'll want to edit this mock to fit your use case
let theme;

module.exports = {
  UnistylesRuntime: {
    hasAdaptiveThemes: false,

    setTheme: (newTheme) => {
      theme = newTheme;
    },
  },

  StyleSheet: {
    configure: (config) => {
      theme = config.themes.light;
    },

    create: (styles) => {
      if (typeof styles === 'function') {
        return styles(theme);
      }

      return styles;
    },
  },
};

[remyoudemans]

Thanks @rkrv ! That mock was really helpful to get me started.

Once I had that going, I still had to bang my head against a wall for an hour because of this issue: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Any built-in component that used a style prop was undefined.

The only way I found to fix it was to disable the unistyles babel plugin during tests 😕

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  const plugins = [["react-native-unistyles/plugin"]];
  // unistyles plugin breaks jest tests
  const pluginsDuringTests = [];
  return {
    presets: ["babel-preset-expo"],
    plugins: process.env.NODE_ENV === "test" ? pluginsDuringTests : plugins,
  };
};

[ryanlanciaux]

Bumped into this one also. Thanks @rkrv and @remyoudemans.

This was resolved by mocking Stylesheet from Unistyles AND the babel plugin changes when NODE_ENV='test'. A lot of the error messages I was seeing before changing the babel.config were fairly confusing.