Jest测试React Checkbox onChange报simulate未找到节点错误
报错根因
抛出simulate is meant to be run on 1 node. 0 found instead的直接原因是component.find('input')没有匹配到任何节点,本质是你查找DOM的选择器不对:你使用的是封装过的Checkbox自定义组件,组件内部的原生input不一定直接暴露在当前查找层级,硬写input作为选择器很容易匹配不到。
除此之外你的测试逻辑本身也有问题:手动调用component.instance().showBox()属于直接跳转到方法执行,根本没有验证onChange绑定的整条逻辑链路,等于白测。
正确测试写法
不要硬找原生input标签,优先通过组件类定位Checkbox节点,同时移除冗余的手动方法调用,完整覆盖逻辑分支即可,参考代码如下:
import React from 'react'; import { mount } from 'enzyme'; import View from '@/views/yourViewComponent'; // 替换为你的组件实际路径 import Checkbox from '@/components/Checkbox'; // 第三方组件库直接从对应依赖包引入 it('Checkbox onChange 逻辑校验', () => { // mock 传入的handleChange方法 const mockHandleChange = jest.fn(); // 挂载组件 const wrapper = mount( <View showTab={true} handleChange={mockHandleChange} /> ); // 定位Checkbox组件节点,不要硬搜input const checkbox = wrapper.find(Checkbox).at(0); const instance = wrapper.instance(); // 用spyOn监听实例方法,不要直接赋值覆盖 const spySetState = jest.spyOn(instance, 'setState'); const spyShowBox = jest.spyOn(instance, 'showBox'); // 触发change事件 checkbox.simulate('change'); // 断言逻辑链路正常 expect(spyShowBox).toHaveBeenCalledTimes(1); expect(spySetState).toHaveBeenCalledWith({ showBox: true }); expect(mockHandleChange).toHaveBeenCalledTimes(1); // 补充分支校验:showTab为false时不触发showBox const wrapperWithoutTab = mount( <View showTab={false} handleChange={mockHandleChange} /> ); const spyShowBoxNoTab = jest.spyOn(wrapperWithoutTab.instance(), 'showBox'); wrapperWithoutTab.find(Checkbox).at(0).simulate('change'); expect(spyShowBoxNoTab).not.toHaveBeenCalled(); expect(mockHandleChange).toHaveBeenCalledTimes(2); });
排错小技巧:如果始终找不到节点,在find语句前加一句
console.log(wrapper.debug())打印当前实际渲染的DOM结构,对照结构调整选择器即可。如果是antd、MUI这类第三方组件库的Checkbox,也可以用组件实际渲染的CSS类名(比如antd的.ant-checkbox-input)定位原生input节点。
内容的提问来源于stack exchange,提问作者komal
相关产品推荐
相关产品推荐

