How to simulate an Appearance ("dark mode") change in React Native using Jest?

Viewed 55

I am writing a puzzle app in React Native where the user can solve a puzzle by changing their device's Appearance to dark mode. I'm using React Native's Appearance module to accomplish this, by calling Appearance.getColorScheme() to get the initial color scheme, and registering an event listener for when the color scheme changes using Appearance.addChangeListener() within the useEffect hook:

useEffect(() => {
      const originalColorScheme = Appearance.getColorScheme();

      Appearance.addChangeListener((event) => {
        if (Appearance.getColorScheme() !== originalColorScheme) {
          setSolved(true);
        }
      });
    }, []);

This is working fine, but I'd like to be able to unit test my component by simulating a change to dark mode in Jest and/or React Native Testing Library (or similar), after which I can check for changes to the content of the page (a "congratulations" message, in this case).

In my mind, it could look something like:

const text = await screen.findByText("good luck!");
// fireEvent("changeColorScheme", { colorScheme: "dark" });
const text2 = await screen.findByText("congratulations!");

Is anything like this possible? I'm guessing it has something to do with mocks, but it's a little over my head at the moment. Thanks for any help you can provide!

0 Answers
Related