Unit testing widths for different screen sizes

[dan-pzbp]

Ask your Question

I currently have a React Native project which uses Tailwind/NativeWind for applying different widths depending on the screen size.

const MyComponent = () => (
    <View className="w-16 lg:m-32" testID="testID">
        <Text title="Hello world" />
    </View>
);

In my current unit test, I've got something along the lines of...

it("should have a width of 64px", () => {
   const { getByTestId } = render(<MyComponent />);
    const foundBodyElement = getByTestId("testID");
    expect((foundBodyElement.props as ElementProps).style).toEqual(expect.arrayContaining([
      expect.objectContaining({
        width: 64,
      })
    ]));
});

I'd like to also have a test for the the large screens to assert they have a larger width... something along the lines of:

it("should have a width of 128px", () => {
   const { getByTestId } = render(<MyComponent />);
    const foundBodyElement = getByTestId("testID");
    expect((foundBodyElement.props as ElementProps).style).toEqual(expect.arrayContaining([
      expect.objectContaining({
        width: 128,
      })
    ]));
});

However, I'm not sure how I can get the second test to think it's on a larger screen so that the larger class name gets applied.

[mdjastrzebski]

@dan-pzbp You will need to mock whatever method Tailwind/NativeWind uses to query screen size and make it return the screen sizes you tests expect.

[dan-pzbp]

@dan-pzbp You will need to mock whatever method Tailwind/NativeWind uses to query screen size and make it return the screen sizes you tests expect.

Okay thanks. Will close this question here as I've opened on the NativeWind repo, as mocking the Dimensions API doesn't seem to work.

nativewind/nativewind#497