React Native Jest测试getByText返回_fiber、toBeDisabled失效问题咨询

问题根因 #

1. 你当前使用的toBeDisabled断言方法由Web端测试库@testing-library/jest-dom提供，这个库仅支持识别HTML DOM元素，完全不适配React Native环境
2. React Native 底层渲染的是移动端原生组件，不会生成HTML结构，所以永远无法在测试中拿到HTML元素，直接使用React Native专属的测试工具链即可解决需求
3. 你当前对useFocusEffect的mock不符合接口定义，会额外导致组件运行报错

具体解决步骤 #

1. 安装React Native专属断言库 #

首先安装@testing-library/jest-native，这是官方配套的React Native测试断言扩展库，原生支持toBeDisabled等适配RN组件的断言方法：

npm install --save-dev @testing-library/jest-native
# 或使用yarn
yarn add --dev @testing-library/jest-native

2. 替换断言库引入 #

删除代码中的import '@testing-library/jest-dom';，替换为RN专属的断言扩展引入：

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

你也可以将这行代码放到Jest全局配置文件（比如jest.setup.js）中，避免每个测试文件重复引入。

3. 修正useFocusEffect的错误mock #

useFocusEffect的入参是回调函数，你当前返回带navigate的对象不符合接口定义，修改为：

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

4. 直接运行测试 #

修改完成后你的原有断言expect(button).toBeDisabled()可以直接正常运行，jest-native会自动读取RN按钮组件的disabled属性完成判断。

可选替代方案 #

如果需要断言自定义组件的属性，也可以直接读取组件的props属性手动判断，效果和toBeDisabled完全一致：

expect(button.props.disabled).toBe(true);

内容的提问来源于stack exchange，提问作者Colin Steel