Testing

Unistyles provides its own mocks to help you test your components. Follow this guide to learn how to use them.

Including Mocks

You don’t need to mock anything manually, as Unistyles supplies all necessary mocks for its core and for NitroModules. To use them, simply add react-native-unistyles/mocks to the setupFiles of your Jest config.

package.json

{
    "jest": {
        "preset": "jest-expo",  // or use own config for bare react native
        "setupFiles": [
            "react-native-unistyles/mocks"
        ]
    }
}

Include Unistyles Configuration

Each StyleSheet requires a configuration object passed to the StyleSheet.configure function. This is also true in the test environment. Extend the configuration from the previous step by including the file where you configure Unistyles.

package.json

{
    "jest": {
        "preset": "jest-expo",
        "setupFiles": [
            "react-native-unistyles/mocks",
            "./unistyles.ts" // provide the correct path to your Unistyles configuration file
        ]
    }
}

Caution

You must include configuration file after the mocks as they provide all necessary stubs for StyleSheet.configure.

If StyleSheet.configure is called from a design system package rather than your app, point setupFiles at that package’s entry instead of a local file:

package.json

{
    "jest": {
        "preset": "jest-expo",
        "setupFiles": [
            "react-native-unistyles/mocks",
            "@your-ds/unistyles" // wherever StyleSheet.configure is actually called
        ]
    }
}

Babel Plugin

The Babel plugin is a no-op when NODE_ENV === 'test' (Jest sets this by default).

Understanding the role of mocks

Mocks contain basic logic to correctly execute Unistyles code. The Jest environment does not provide a screen (width and height), pixel ratio, or any other values from UnistylesRuntime.

Keep in mind the following limitations:

• StyleSheet.create, useUnistyles and withUnistyles always resolve styles with the first registered theme. initialTheme and adaptiveThemes are ignored
• runtime values like screen, insets, statusBar and navigationBar dimensions are always 0
• variants and compoundVariants are stripped from your styles and useVariants does nothing
• Display, Hide and ScopedTheme render nothing
• createUnistylesElement, UnistyleDependency and the SSR helpers (useServerUnistyles, hydrateServerUnistyles, getServerUnistyles, resetServerUnistyles) are not mocked and will be undefined

You should never test how Unistyles parses your styles, whether your component has certain styles, or if it is visible. These tests can result in false positives.

Instead, configure E2E tests using eg. Playwright or Maestro.

In these environments, you can test how Unistyles parses your styles and how your app looks like.