jpudysz / react-native-unistyles

Level up your React Native StyleSheet
https://unistyl.es
MIT License
1.41k stars 39 forks source link

"Cannot read properties of undefined (reading 'insets')" in jest tests caused by mini runtime missing in mocks #236

Closed matthieugicquel closed 2 months ago

matthieugicquel commented 2 months ago

Description

Using the mini runtime from the second argument in the createStylesheet callback causes errors in tests

Steps to reproduce

Minimal reproduction:

import { render } from "@testing-library/react-native";
import { View } from "react-native";
import { createStyleSheet, useStyles } from "react-native-unistyles";

const Component = () => {
  const { styles } = useStyles(stylesheet);

  return <View style={styles.container} />;
};

const stylesheet = createStyleSheet((_theme, runtime) => ({
  container: {
    paddingTop: runtime.insets.top,
  },
}));

test("renders", () => {
  render(<Component />);
});

I've been looking at the code a little, and it seems useStyles reads the mini runtime from unistyles.runtime.miniRuntime.

https://github.com/jpudysz/react-native-unistyles/blob/2f51cd5768ffef07319c20303e8c86185c22029d/src/useStyles.ts#L29

However this getter is not defined in the mock

Snack or a link to a repository (optional)

No response

Unistyles version

2.8.2

React Native version

0.74.3

Platforms

iOS

Engine

Hermes

Architecture

Fabric (new)

jpudysz commented 2 months ago

Thanks for the report.

I know why it's happening. Will add a fix later today 🙏