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 include react-native-unistyles/mocks in your jest.setup.ts file.

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.

Babel Plugin

The Babel plugin is automatically disabled in the jest test environment or when NODE_ENV === 'test'.

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.

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.