React中使用sinon测试遇TypeError及参数解构断言错误如何解决

错误原因说明 #

你遇到的AssertionError: expected false to be true和参数解构无关，完全是测试逻辑错误导致的：
你定义的testFunc内部没有任何调用传入参数的逻辑，你将spy作为第三个参数传入函数后，spy全程没有被执行，sinon的spy只有被主动调用时才会记录入参，因此spy.calledWithExactly永远返回false，断言自然失败。

你提到的TypeError: Cannot read property 'substring' of undefined是独立的问题，通常是React在处理className属性时接收到了undefined/非字符串值，内部调用substring方法处理类名时抛出的错误，和本次的断言错误无关。

正确测试方案 #

如果你需要验证testFunc的入参是否被正确接收、解构正常，可以选以下任意一种方案：

方案1：用sinon spy监听测试函数本身 #

直接对testFunc创建spy，验证函数接收的入参是否符合预期：

const funcArguments = ['testClass', 'testItemName'];
// 注意如果testFunc是模块导出的，需要对应spy模块的导出属性
const spy = sinon.spy(window, 'testFunc');
// 调用测试函数
testFunc(...funcArguments);
// 验证入参
expect(spy.calledWithExactly('testClass', 'testItemName')).to.be.true;
// 测试完成后恢复原函数
spy.restore();

方案2：通过渲染结果验证解构正确性 #

组件测试更推荐直接验证输出结果，比验证入参更贴合实际使用场景：

// 以@testing-library/react为例
const { container } = render(testFunc('testClass', 'testItemName'));
const divEl = container.firstChild;
expect(divEl).toHaveClass('testClass');
expect(divEl).toHaveTextContent('testItemName');

通用排查步骤 #

• 先打印spy的调用记录确认调用状态：执行console.log(spy.callCount, spy.args)，可以直接看到spy是否被调用、接收的参数是什么，快速定位断言失败原因
• 排查substring报错时，在testFunc解构后打印nameOfClass的值，确认是否存在传入undefined的场景
• 如果使用JSX语法测试，确保测试环境配置了babel/tsc的React语法转换，避免语法解析导致的异常问题

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