Usage with react native testing library

[pierrezimmermannbam]

Hello @jpudysz! First thank you for this awesome library, I find the API really amazing!

I want to test components using react-native-testing-library but I get the error that says that Unistyles runtime is not available. This makes sense because native module is not there so I guess we'd need to mock the lib but there is no available jest preset. I have started trying to mock but it's quite complicated and I'm not sure at all if it's really feasible. Have you already thought about this? What would be your recommended approach?

[pierrezimmermannbam]

I managed to have something that works by doing this in a jest setup file

import { NativeModules } from 'react-native';

NativeModules.Unistyles = {
  install: jest.fn().mockReturnValue(true),
};

global.__UNISTYLES__ = {
  enabledPlugins: [],
  useBreakpoints: jest.fn(),
  useAdaptiveThemes: jest.fn(),
  useTheme: jest.fn(),
  themeName: 'default',
};

It's not perfect yet because the themeName won't change so it could for sure be improved. I'll try to investigate further, I think it would be nice to have a setup file provided by the lib, I can work on a PR if you're interested

[jpudysz]

Hey 👋 here are some examples: https://github.com/jpudysz/react-native-unistyles/tree/main/src/__tests__

But you have something simillar now

[jpudysz]

And of course I'm interested in better mock! I would use it in the core's test. As you can see, right now I have minimal mocks to test the single feature in isolation 🙏

[swizes]

This one has worked well

In addition adding jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter'); gets rid of all warnings related to listeners for NativeEventEmitter. But we should come with a solution, which can be imported from the library right away.

Disclaimer: we have only only one theme in our configuration. No plugins, no adaptive themes etc.

[levibuzolic]

I found the UnistylesBridgeWeb was a pretty complete implementation to base a functional mock on.

Originally I trying to use a __mocks__ file, but struggled to get only the UnistylesModule file mocked -- I'm pretty sure I was just getting the path name wrong for Jest, it's not immediately clear to me which implementation path I should have been mocking (commonjs, module or src).

I also noticed that NativeEventEmitter(NativeModules.Unistyles) is used in more than one place, so it might be worthwhile providing that as an interface exposed by the bridge module to keep the surface area to a minimum.

Here's what I've got up and running:

import type {UnistylesBreakpoints, UnistylesThemes} from 'react-native-unistyles';
import type {ColorSchemeName, UnistylesBridge} from 'react-native-unistyles/lib/typescript/src/types';

jest.mock('react-native', () => {
  const RN = jest.requireActual('react-native');

  class MockUnistylesBridge {
    #timerRef?: ReturnType<typeof setTimeout> = undefined;
    #hasAdaptiveThemes: boolean = false;
    #supportsAutomaticColorScheme = false;
    #screenWidth = 375;
    #screenHeight = 812;
    #themes: Array<keyof UnistylesThemes> = [];
    #breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints;
    #colorScheme: ColorSchemeName = 'light';
    #themeName: keyof UnistylesThemes = '' as keyof UnistylesThemes;
    #enabledPlugins: Array<string> = [];
    #unistylesEvents = new RN.NativeEventEmitter(RN.NativeModules.Unistyles);
    #sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, number]> = [];
    #breakpoint: keyof UnistylesBreakpoints = '' as keyof UnistylesBreakpoints;
    #contentSizeCategory = 'unspecified';

    public install() {
      // @ts-ignore
      global.__UNISTYLES__ = this;
      return true;
    }

    public useTheme(themeName: keyof UnistylesThemes) {
      this.#themeName = themeName;
      this.emitThemeChange();
    }

    public useBreakpoints(breakpoints: UnistylesBreakpoints) {
      this.#breakpoints = breakpoints;
      this.#sortedBreakpointPairs = Object.entries(breakpoints).sort(([, a], [, b]) => (a ?? 0) - (b ?? 0)) as Array<
        [keyof UnistylesBreakpoints, number]
      >;

      this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth as number);
    }

    public useAdaptiveThemes(enable: boolean) {
      this.#hasAdaptiveThemes = enable;

      if (!this.#hasAdaptiveThemes || !this.#supportsAutomaticColorScheme) return;

      if (this.#themeName !== this.#colorScheme) {
        this.#themeName = this.#colorScheme as keyof UnistylesThemes;
        this.emitThemeChange();
      }
    }

    public addPlugin(pluginName: string, notify: boolean) {
      this.#enabledPlugins = [pluginName].concat(this.#enabledPlugins);
      if (notify) this.emitPluginChange();
    }

    public removePlugin(pluginName: string) {
      this.#enabledPlugins = this.#enabledPlugins.filter(name => name !== pluginName);
      this.emitPluginChange();
    }

    get themeName(): keyof UnistylesThemes {
      if (this.#themes.length === 1) return this.#themes.at(0)!;
      return this.#themeName;
    }

    set themeName(themeName: keyof UnistylesThemes) {
      this.#themeName = themeName as keyof UnistylesThemes;
      this.emitThemeChange();
    }

    set themes(themes: Array<keyof UnistylesThemes>) {
      this.#themes = themes;
      this.#supportsAutomaticColorScheme = themes.includes('light') && themes.includes('dark');
    }

    get screenWidth() {
      return this.#screenWidth;
    }

    get screenHeight() {
      return this.#screenHeight;
    }

    get contentSizeCategory(): any {
      return this.#contentSizeCategory;
    }

    get breakpoint() {
      return this.#breakpoint || undefined;
    }

    get breakpoints() {
      return this.#breakpoints;
    }

    get hasAdaptiveThemes() {
      return this.#hasAdaptiveThemes;
    }

    get sortedBreakpointPairs() {
      return this.#sortedBreakpointPairs;
    }

    get enabledPlugins() {
      return this.#enabledPlugins;
    }

    get colorScheme() {
      return this.#colorScheme;
    }

    private emitPluginChange() {
      this.#unistylesEvents.emit('__unistylesOnChange', {type: 'plugin'});
    }

    private emitThemeChange() {
      this.#unistylesEvents.emit('__unistylesOnChange', {type: 'theme', payload: {themeName: this.#themeName}});
    }

    private getBreakpointFromScreenWidth(width: number): keyof UnistylesBreakpoints {
      const breakpoint = this.#sortedBreakpointPairs.find(([, value], index, otherBreakpoints) => {
        const minVal = value;
        const maxVal = otherBreakpoints[index + 1]?.[1];

        if (!maxVal) return true;

        return width >= minVal && width < maxVal;
      });

      return breakpoint?.at(0) as keyof UnistylesBreakpoints;
    }
  }

  if (!RN.NativeModules.Unistyles) RN.NativeModules.Unistyles = new MockUnistylesBridge() satisfies UnistylesBridge;

  return RN;
});

[jpudysz]

@levibuzolic super cool!

As soon as I return from my vacation, I will expose the mocks from the internals so that everyone can use them with Jest.

Thank you for the hints! 🙏

[Doko-Demo-Doa]

Hi @levibuzolic , tried your solution but I got this:

Invariant Violation: `new NativeEventEmitter()` requires a non-null argument.

What did I miss here?

[levibuzolic]

@Doko-Demo-Doa sounds like you may have another mock that’s overriding the RN.NativeModules object, so that RN.NativeModules.Unistyles is becoming null or undefined.

[Doko-Demo-Doa]

@jpudysz Sorry for bumping this. But even after implementing above mock, I still cannot run the render test successfully. Here is the log:

The mock file is as follow, based on @levibuzolic 's solution:

import "@testing-library/jest-dom/extend-expect";
import type {
  UnistylesBreakpoints,
  UnistylesThemes,
} from "react-native-unistyles";
import type {
  ColorSchemeName,
  UnistylesBridge,
} from "react-native-unistyles/lib/typescript/src/types";

jest.mock("react-native", () => {
  const RN = jest.requireActual("react-native");

  class MockUnistylesBridge {
    #timerRef?: ReturnType<typeof setTimeout> = undefined;
    #hasAdaptiveThemes = false;
    #supportsAutomaticColorScheme = false;
    #screenWidth = 375;
    #screenHeight = 812;
    #themes: Array<keyof UnistylesThemes> = [];
    #breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints;
    #colorScheme: ColorSchemeName = "light";
    #themeName: keyof UnistylesThemes = "" as keyof UnistylesThemes;
    #enabledPlugins: Array<string> = [];
    #unistylesEvents = new RN.NativeEventEmitter(RN.NativeModules.Unistyles);
    #sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, number]> = [];
    #breakpoint: keyof UnistylesBreakpoints = "" as keyof UnistylesBreakpoints;
    #contentSizeCategory = "unspecified";

    public install() {
      // @ts-ignore
      global.__UNISTYLES__ = this;
      return true;
    }

    public useTheme(themeName: keyof UnistylesThemes) {
      this.#themeName = themeName;
      this.emitThemeChange();
    }

    public updateTheme(themeName: keyof UnistylesThemes) {
      if (this.#themeName === themeName) {
        this.emitThemeChange();
      }
    }

    public useBreakpoints(breakpoints: UnistylesBreakpoints) {
      this.#breakpoints = breakpoints;
      this.#sortedBreakpointPairs = Object.entries(breakpoints).sort(
        ([, a], [, b]) => (a ?? 0) - (b ?? 0),
      ) as Array<[keyof UnistylesBreakpoints, number]>;

      this.#breakpoint = this.getBreakpointFromScreenWidth(
        this.#screenWidth as number,
      );
    }

    public useAdaptiveThemes(enable: boolean) {
      this.#hasAdaptiveThemes = enable;

      if (!this.#hasAdaptiveThemes || !this.#supportsAutomaticColorScheme)
        return;

      if (this.#themeName !== this.#colorScheme) {
        this.#themeName = this.#colorScheme as keyof UnistylesThemes;
        this.emitThemeChange();
      }
    }

    public addPlugin(pluginName: string, notify: boolean) {
      this.#enabledPlugins = [pluginName].concat(this.#enabledPlugins);
      if (notify) this.emitPluginChange();
    }

    public removePlugin(pluginName: string) {
      this.#enabledPlugins = this.#enabledPlugins.filter(
        (name) => name !== pluginName,
      );
      this.emitPluginChange();
    }

    get themeName(): keyof UnistylesThemes {
      // biome-ignore lint/style/noNonNullAssertion: <explanation>
      if (this.#themes.length === 1) return this.#themes.at(0)!;
      return this.#themeName;
    }

    // set themeName(themeName: keyof UnistylesThemes) {
    //   this.#themeName = themeName as keyof UnistylesThemes;
    //   this.emitThemeChange();
    // }

    set themes(themes: Array<keyof UnistylesThemes>) {
      this.#themes = themes;
      this.#supportsAutomaticColorScheme =
        themes.includes("light") && themes.includes("dark");
    }

    get screenWidth() {
      return this.#screenWidth;
    }

    get screenHeight() {
      return this.#screenHeight;
    }

    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
    get contentSizeCategory(): any {
      return this.#contentSizeCategory;
    }

    get breakpoint() {
      return this.#breakpoint || undefined;
    }

    get breakpoints() {
      return this.#breakpoints;
    }

    get hasAdaptiveThemes() {
      return this.#hasAdaptiveThemes;
    }

    get sortedBreakpointPairs() {
      return this.#sortedBreakpointPairs;
    }

    get enabledPlugins() {
      return this.#enabledPlugins;
    }

    get colorScheme() {
      return this.#colorScheme;
    }

    private emitPluginChange() {
      this.#unistylesEvents.emit("__unistylesOnChange", { type: "plugin" });
    }

    private emitThemeChange() {
      this.#unistylesEvents.emit("__unistylesOnChange", {
        type: "theme",
        payload: { themeName: this.#themeName },
      });
    }

    private getBreakpointFromScreenWidth(
      width: number,
    ): keyof UnistylesBreakpoints {
      const breakpoint = this.#sortedBreakpointPairs.find(
        ([, value], index, otherBreakpoints) => {
          const minVal = value;
          const maxVal = otherBreakpoints[index + 1]?.[1];

          if (!maxVal) return true;

          return width >= minVal && width < maxVal;
        },
      );

      return breakpoint?.at(0) as keyof UnistylesBreakpoints;
    }
  }

  if (!RN.NativeModules.Unistyles)
    RN.NativeModules.Unistyles =
      new MockUnistylesBridge() satisfies UnistylesBridge;

  return RN;
});

[ederfleming]

Hello.. I'm starting my studies in unit testing in react native and I ended up running into this problem of 'Unistyles runtime is not available. '. Has there been any progress on how to proceed in these cases?

[jpudysz]

Mocks will be available in the next version of Unistyles. If you want to mock it simply add following lines to jest:

jest.mock('react-native-unistyles', () => {
    class MockedUnistyles {
        registry = {
            plugins: []
        }
        runtime = {},
        install =  () => true
    }

    return {
        unistyles: new MockedUnistyles()
    }
})

[ederfleming]

Thank you very much... I'm still having some problems running the tests, but I believe it's more due to my lack of experience on the subject. Do you have any predictions on when the new version with testing support will be released?

[jpudysz]

Hard to say, from few days up to 2 weeks

[jpudysz]

Hey all, mocks are ready!

Please give it a try, I want to gather some feedback before official release.

In order to use mocks you need to:

• remove your old mocks
• install next version of unistyles

yarn add react-native-unistyles@next

follow this guide: https://www.unistyl.es/reference/testing/

[levibuzolic]

Awesome @jpudysz, it worked perfectly out of the box in Jest with RNTL. 👍

[pierrezimmermannbam]

Thanks @jpudysz ! It tried on my project, it worked well for a mobile environment but with my web setup I had an error due to window.matchMedia not existing. I kept a mock file for unistyles with the following code

window.matchMedia = jest.fn().mockImplementation(() => ({
  matches: false,
  addEventListener: jest.fn(),
  removeEventListener: jest.fn(),
}));

module.exports = require('react-native-unistyles');

This just defines a mock for matchMedia before unistyles gets imported. Based on Jest's doc, it looks like this method has not yet been implemented in Jsdom so maybe it could be worth mentioning that workaround in your guide for users that want to test the web as well

[jpudysz]

Thanks for the report, I will update the docs! 🙏

[rokkoo]

One question, how do you mock the theme call back from createStyleSheet? Every time that I run a test that uses createStyleSheet I get:

    TypeError: Cannot read properties of undefined (reading 'xxs')

      52 |
      53 |     deleteAccountContainer: {
    > 54 |       marginHorizontal: theme.margins.xxs,

I followed all the instructions of the documentation

Thank you @jpudysz !

[jpudysz]

Simply init unistyles with UnistylesRegistry (with your theme) like in regular app ☺️

[rokkoo]

Ohh thanks, I didn't realize about it xD

If another person has the same problem just require the UnistylesRegistry on your jest.setup.js

// jest.setup.js
require('./unistyles.ts');

[eeston]

Thanks @jpudysz & @rokkoo. This wasn't obvious to me at first and I spent too long trying to manage my own mocks 😭

I raised a PR here to add this to the docs...hope it helps!

[gmantuanrosa]

Sorry to chime in later but I added the import into the jest.setup.js file and also added NODE_ENV=test and even with that testing a component returns empty styles, for instance:

Test assertion for the component:

expect(screen.getByTestId('TextMessage-bubble')).toHaveStyle({
      backgroundColor: '#FFFFFF',
    });

Console.log that returns from the rendered component:

{
        testID: 'TextMessage-bubble',
        style: {},
        children: [
          {
            '$$typeof': Symbol(react.element),
            type: [Function],
            key: null,
            ref: null,
            props: [Object],
            _owner: [FiberNode],
            _store: {}
          },
          {
            '$$typeof': Symbol(react.element),
            type: [Function],
            key: null,
            ref: null,
            props: [Object],
            _owner: [FiberNode],
            _store: {}
          }
        ]
      }

Stylesheet defined on my styles.ts file for the Message component

  bubble: (isOwner: boolean) => ({
    flex: 1,
    padding: theme.spacing.xsmall,
    borderRadius: theme.spacing.xxsmall,
    maxWidth: 242,
    gap: theme.spacing.xxxsmall,
    alignSelf: isOwner ? 'flex-end' : 'flex-start',
    backgroundColor: isOwner ? theme.colors.peace : theme.colors.white,
    borderBottomRightRadius: isOwner ? 0 : 8,
    borderBottomLeftRadius: isOwner ? 8 : 0,
    marginVertical: 8,
    // For iOS:
    shadowColor: '#9898A6',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 6,

    // For Android:
    elevation: 6,
  }),

Is this supposed to work, or am I missing something in the config file?