Problem when testing a component with react-native-safe-area-context

user_11051117 0
Viewed 1679

I have a problem when trying to test a component with react-native-safe-area-context,

Test file:

import _ from "lodash"
import React from "react"
import mockSafeAreaContext from "react-native-safe-area-context/jest/mock"
import renderer from "react-test-renderer"

import CeoHeader from "../../src/screens/assessment/board/ceo_review/header"

jest.mock("react-native-safe-area-context", () => mockSafeAreaContext)

let props

beforeEach(() => {
  props = {
    onBack: jest.fn(),
    firstOrLastPage: _.sample([true, false]),
    onRefresh: jest.fn(),
  }
})

describe("<CeoHeader />", () => {
  it("has 1 child", () => {
    const tree = renderer.create(<CeoHeader {...props} />).toJSON()
    expect(tree.children).toHaveLength(1)
  })
})

Error:

enter image description here

SafeAreaProvider is rendered at the top of the app

    <Root>
      <LoadingOverlay loading={loadingRdirectAction} />
      <SafeAreaProvider
        initialMetrics={{
          frame: { x: 0, y: 0, width: 0, height: 0 },
          insets: { top: 0, left: 0, right: 0, bottom: 0 },
        }}
      >
        <AppNavigator />
      </SafeAreaProvider>
    </Root>
react-native jestjs
3 Answers

Here's a much simpler way to mock this. It is described in the library's documentation:

import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';

jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);

Put this in your test or jest setup file.

user_14876870

Found a solution here:

https://github.com/th3rdwave/react-native-safe-area-context/issues/31

This is how it worked for me:

jest.mock('react-native-safe-area-context', () => {
  const inset = { top: 0, right: 0, bottom: 0, left: 0 }
  return {
    SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children),
    SafeAreaConsumer: jest
      .fn()
      .mockImplementation(({ children }) => children(inset)),
    useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
  }
})
user_53307700

Steps to mock react-native-safe-area-context correctly

  1. Create a file mockSafeAreaContext.tsx
import React from 'react';
const MOCK_INITIAL_METRICS = {
  frame: {
    width: 320,
    height: 640,
    x: 0,
    y: 0,
  },
  insets: {
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
  },
};

const RNSafeAreaContext = jest.requireActual('react-native-safe-area-context');

export default {
  ...RNSafeAreaContext,
  initialWindowMetrics: MOCK_INITIAL_METRICS,
  SafeAreaProvider: ({ children, initialMetrics }) => {
    return (
      <RNSafeAreaContext.SafeAreaFrameContext.Provider
        value={initialMetrics?.frame ?? MOCK_INITIAL_METRICS.frame}>
        <RNSafeAreaContext.SafeAreaInsetsContext.Provider
          value={initialMetrics?.insets ?? MOCK_INITIAL_METRICS.insets}>
          {children}
        </RNSafeAreaContext.SafeAreaInsetsContext.Provider>
      </RNSafeAreaContext.SafeAreaFrameContext.Provider>
    );
  },
  useSafeAreaInsets: jest.fn, // add more hooks if needed
};
  1. Now use jest to mock in your mock file
import mockSafeAreaContext from 'created-file-path'

jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);

react-native-safe-area-context

user_104532490
Related