React中Reducer简单单元测试遇TypeError报错，求解决方案

我之前也碰到过一模一样的问题，这个错误本质是你在测试里尝试调用的Reducer并不是一个可执行的函数——大概率是导入导出不匹配或者Reducer本身定义有误导致的。下面是一步步的排查和解决方法：

1. 检查Reducer的导出与测试文件的导入是否匹配 #

这是最常见的原因：

• 如果你的Reducer用的是默认导出，测试文件里必须用默认导入：

  // Global.js（Reducer文件）
  export default function globalReducer(state = { /* 初始状态 */ }, action) {
    switch(action.type) {
      // 你的Reducer逻辑
      default:
        return state;
    }
  }
  
  // Global.test.js（测试文件）
  import globalReducer from '../Global'; // 这里用默认导入，对应default导出
  

• 如果是命名导出，测试里要使用解构导入：

  // Global.js
  export function globalReducer(state = initialState, action) { /* ... */ }
  
  // Global.test.js
  import { globalReducer } from '../Global'; // 注意花括号，对应命名导出
  

  要是你混着用（比如Reducer是命名导出，测试里用默认导入），那拿到的globalReducer就会是undefined或者非函数值，调用时自然报错。

2. 确认Reducer的定义是纯函数 #

Reducer必须是接收state和action两个参数的纯函数，绝对不能是对象、类或者其他非函数类型：

// ❌ 错误示例：Reducer定义成了对象
const globalReducer = { /* ... */ };
export default globalReducer;

// ✅ 正确示例：Reducer是纯函数
export default function globalReducer(state = initialState, action) {
  switch(action.type) {
    default:
      return state;
  }
}

3. 检查测试文件的导入路径是否正确 #

报错行指向src/__tests__/Global.test.js:5:33，也就是你调用Reducer的位置。先确认导入的路径是否正确：

• 如果Reducer在src/Global.js，测试文件在src/__tests__/Global.test.js，那导入路径应该是../Global，而不是./Global（后者会找__tests__目录下的Global文件，大概率不存在）。

4. 验证测试用例的调用逻辑 #

正确的测试用例应该是直接调用Reducer函数，传入undefined和空action：

import globalReducer from '../Global';

describe('Global Reducer', () => {
  it('should return initial state with undefined state and empty action', () => {
    // 调用Reducer，传入undefined作为初始state，空action
    const result = globalReducer(undefined, {});
    // 断言结果等于你的初始状态
    expect(result).toEqual({ /* 预期的初始状态 */ });
  });
});

按照上面的步骤排查一遍，应该就能解决这个错误了！

内容的提问来源于stack exchange，提问作者Great Khan 2016