React Native Jest 测试答案

【问题标题】：React Native Jest testingReact Native Jest 测试
【发布时间】：2021-09-20 10:37:21
【问题描述】：

我们有一个 React Native 应用，但在 Jest 测试中遇到了麻烦：

import React from 'react';
import { render } from '@testing-library/react-native';
import MyScreen from '../../../../../src/screens/MyScreen/index';
import Provider from '../../../../__helpers__/Provider';
import { t } from 'core/utils';
import '@testing-library/jest-dom';

jest.mock('@react-navigation/native', () => {
  return {
    ...jest.requireActual('@react-navigation/native'),
    useNavigation: () => ({
      navigate: jest.fn(),
    }),
  };
});

jest.mock('@react-navigation/core', () => {
  return {
    ...jest.requireActual('@react-navigation/core'),
    useFocusEffect: () => ({
      navigate: jest.fn(),
    }),
  };
});

describe('<AddEditSchedulable />', () => {
  it('tests a button is disabled', () => {
    const myProperty = {
      myData: 'myData'
    };

    const myRender = render(
      Provider(() => <MyScreen myProperty={myProperty} />),
    );

    const button = myRender.getByText(t('common.buttons.save')); // Returns a complex "_fiber" object.
    expect(button).toBeDisabled(); // Expects an HTML element.
  });
});

getByText 返回的button 包含一个我们无法理解的对象，其中包含大量“_fiber”对象。由此我认为我们需要让 HTML 元素正确使用 toBeDisabled 函数，但这是 React Native，我不认为它在后台使用 HTML 元素。

那么我们是否可以从 React Native 获取 HTML 元素，或者我们是否可以获取能够理解具有我们需要的功能的 React Native 元素的函数（至少访问属性，即“禁用”）？

我们在圈子里，因为标准 React 在 Jest 测试中似乎与 React Native 非常不同。

【问题讨论】：

标签： reactjs react-native jestjs

【解决方案1】：

库 @testing-library/jest-dom 仅适用于 @testing-library/react。由于您使用的是 React Native，因此自定义匹配器 toBeDisabled() 不理解该元素。 react native 的导入如下。

import '@testing-library/jest-native/extend-expect';

删除导入并将其从项目中删除。

import '@testing-library/jest-dom';

另外，请确保这会返回一个反应原生组件。

 Provider(() => <MyScreen myProperty={myProperty} />),

【讨论】：