使用react-native-safe-area-context测试组件时出现问题

Question

我在尝试使用react-native-safe-area-context测试组件时遇到问题，

测试文件：

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)
  })
})

错误：

SafeAreaProvider 呈现在应用程序顶部

    <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>

Answer 1

这是一种更简单的模拟方法。图书馆的文档中对此进行了描述：

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

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

将其放入您的测试或玩笑设置文件中。

Answer 2

在这里找到了解决方案：

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

这对我来说是这样的：

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),
  }
})

Answer 3

react-native-safe-area-context正确模拟的步骤

1. 创建文件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
};

2. 现在使用 jest 在您的模拟文件中进行模拟

import mockSafeAreaContext from 'created-file-path'

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

反应本机安全区域上下文