使用Jest测试React函数组件中状态更新后表达式内的函数调用方法

你遇到的问题主要来自3个常见的测试逻辑疏漏，按优先级排查修改即可： #

1. 缺失按钮点击模拟和重渲染同步 #

你目前的测试代码仅查询了按钮存在，没有实际触发点击事件，也没有同步组件更新后的渲染结果，这是最核心的问题。

额外注意：请确认点击按钮后tableData确实被赋值为非空数组，否则逻辑表达式会短路返回空字符串，不会调用filtersDialog。

修改后的基础测试流程如下：

import { shallow } from 'enzyme';
import ComponentName from './你的组件路径';
import RequiredFieldsRenderer from './RequiredFieldsRenderer路径';

test('状态满足时正确渲染RequiredFieldsRenderer', () => {
  const wrapper = shallow(<ComponentName {...props} />);
  // 先验证初始状态下组件未渲染
  expect(wrapper.find("[data-test='filter-dialog']").length).toBe(0);
  // 找到按钮，模拟点击触发状态更新
  const showPriceBtn = wrapper.find("[data-test='show-pricing-button']");
  showPriceBtn.simulate('click');
  // 关键：同步Enzyme包装器和组件最新渲染结果
  wrapper.update();
})

2. 修正断言写法 #

完成上述流程后，以下两种断言方式都可以正常生效：

方式1：按data-test属性查询 #

// 接上面的测试流程
const rfr = wrapper.find("[data-test='filter-dialog']");
expect(rfr.length).toBe(1);
// 还可以额外校验props是否符合预期
expect(rfr.prop('priceNotRequired')).toBe(true);
expect(rfr.prop('isFilter')).toBe(true);

方式2：按组件类型查询 #

expect(wrapper.find(RequiredFieldsRenderer).length).toBe(1);

方式3：修正containsMatchingElement用法 #

你之前的containsMatchingElement没有传参数，补充参数后也可以使用：

expect(wrapper.containsMatchingElement(
  <RequiredFieldsRenderer data-test="filter-dialog" />
)).toBe(true);

3. 兼容shallow渲染限制（可选） #

如果以上修改后还是查询不到元素，是因为shallow浅渲染对组件内部函数返回的JSX识别有兼容问题，换成mount全量渲染即可：

// 把导入的shallow换成mount
import { mount } from 'enzyme';

// 初始化wrapper时用mount
const wrapper = mount(<ComponentName {...props} />);
// 后续逻辑和上面完全一致

调试技巧 #

如果还有问题，在wrapper.update()后加一行打印，直接查看当前渲染的完整结构，快速定位问题：

console.log(wrapper.debug());

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