React Native运行测试报ReferenceError: 已定义的setStatusBarColor Hook未定义

问题原因 #

你遇到的ReferenceError是由setStatusBarColor的非法导出语法导致的：你直接对未声明的变量setStatusBarColor赋值并默认导出，严格模式下这种写法会直接抛出变量未定义的错误。

修复步骤 #

1. 修复Hook的导出语法 #

修改StatusBarColorFunctions.js文件的导出逻辑，有两种可选写法：
推荐写法（可读性更高）：先声明变量再导出

import { useRecoilState } from 'recoil';
import { statusBarColor, bottomBarColor } from '../../atoms';

// 先声明函数变量
const setStatusBarColor = () => {
  const [statusColor, setStatusColor] = useRecoilState(statusBarColor);
  const [bottomColor, setBottomColor] = useRecoilState(bottomBarColor);

  const setColor = (top, bottom) => {
    if (top && bottom) {
      setStatusColor(top);
      setBottomColor(bottom);
    } else {
      setStatusColor(top);
      setBottomColor(top);
    }
  }
  return [setColor];
}
// 再默认导出
export default setStatusBarColor;

简化写法：直接导出匿名函数

export default () => {
  // 原有逻辑不变
}

2. 修复测试代码的运行环境问题 #

修复导出问题后，你还会遇到两个测试运行错误，需要同步修改测试代码：

• 你的组件使用了Recoil状态，测试时必须将组件包裹在RecoilRoot组件内，否则会抛出Hook调用上下文错误
• HomeScreen接收navigation作为props，测试时需要传入mock的navigation对象，且renderer.create需要传入JSX元素而非组件构造函数

修改后的测试代码示例：

import '../../../matchMedia.mock';
import React from 'react';
import renderer from 'react-test-renderer';
import { RecoilRoot } from 'recoil';
import HomeScreen from '../HomeScreen';

//  mock navigation对象
const mockNavigation = {
  addListener: jest.fn(),
  navigate: jest.fn()
};

test('renders correctly', () => {
    const tree = renderer.create(
      <RecoilRoot>
        <HomeScreen navigation={mockNavigation} />
      </RecoilRoot>
    ).toJSON();
    expect(tree).toMatchSnapshot();
});

你之前导入的ReactDOM在React Native测试中不需要，可以直接删除。

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