React-native-testing-library: Question: how to mock UI Manager?

[artyorsh]

Ask your Question

Hi!

I need help. Any chance to mock UI Manager with Jest? My setup requires mocking measureInWindow and probably findNodeHandle to perform testing components that relies on this module and native measurements.

What I do (here Modal is a custom component)

jest.mock('react-native/Libraries/ReactNative/UIManager', () => {
  const UIManagerModule = jest.requireActual('react-native/Libraries/ReactNative/UIManager');
  return {
    ...UIManagerModule,
    measureInWindow: (node, callback) => {
      callback(0, 0, 42, 42);
    },
  };
});

const TestModal = (props) => (
  <Modal {...props}>{props.children}</Modal>
);

it('should render content when visible', async () => {
  const component = render(
    <TestModal visible={true}>
      <Text>I love Jest</Text>
    </TestModal>,
  );

  const content = await waitForElement(() => component.queryByText('I love Jest'));
  expect(content).toBeTruthy();
});

But this seems not to work, since making query with getBy api throws and queryBy always returns null even when it should not.

Sorry if it is not the right place for asking. Can I get some help with it?

[thymikee]

Don't test private APIs like jest.mock('react-native/Libraries/ReactNative/UIManager')
UIManager is exposed through react-native and that's what you need to mock

Example:

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

  RN.UIManager.getViewManagerConfig = name => {
    return {};
  };

  Object.defineProperty(RN, "findNodeHandle", {
    get: jest.fn(() => () => 1),
    set: jest.fn()
  });

  return RN;
});

[artyorsh]

Many thanks @thymikee, you made it work 👍