Jest中React组件正负场景测试失败，如何正确编写测试用例？

首先看你的测试代码里存在几个明显问题，导致两个用例都失败：

问题1：重复的测试块名称 #

你两个describe块的名称都是without data，这不仅会造成逻辑混淆，也不符合测试用例的命名规范，第二个测试块应该对应data={true}的场景，改成when data is true会更清晰。

问题2：组件实例初始化时机错误 #

你在describe块内直接初始化了mount变量，这会导致组件在测试套件初始化阶段就被创建，而非每个测试用例执行时重新生成实例，容易引发测试间的状态污染。正确的做法是把组件初始化放在it用例内部，或者用beforeEach确保每个测试都有干净的组件实例。

问题3：断言方法与逻辑完全反向 #

contains方法的使用方式不适合当前场景，而且你的断言逻辑完全搞反了：

• 当data={true}时，组件渲染的是含"Hello"文本的元素，你应该断言它存在，而非toBeNull()；
• 当data={false}时，组件渲染的是含"Hi"的元素，你应该断言"Hello"不存在。

另外，contains检查文本的可靠性不如直接用text()或通过元素选择器验证存在性，这也是报错的核心原因。

修正后的完整测试代码 #

import React from 'react';
import { shallow } from 'enzyme'; // 确保已导入enzyme的shallow渲染方法
import { Foo } from './foo';

describe('Foo Component', () => {
  describe('when data is false', () => {
    it('renders "Hi" with correct className and id', () => {
      const wrapper = shallow(<Foo data={false} />);
      // 验证文本内容为"Hi"
      expect(wrapper.text()).toBe('Hi');
      // 验证渲染了带有className="hi"的元素
      expect(wrapper.find('.hi').exists()).toBe(true);
      // 验证不存在带有className="hello"的元素
      expect(wrapper.find('.hello').exists()).toBe(false);
    });
  });

  describe('when data is true', () => {
    it('renders "Hello" with correct className and id', () => {
      const wrapper = shallow(<Foo data={true} />);
      // 验证文本内容为"Hello"
      expect(wrapper.text()).toBe('Hello');
      // 验证渲染了带有className="hello"的元素
      expect(wrapper.find('.hello').exists()).toBe(true);
      // 验证不存在带有className="hi"的元素
      expect(wrapper.find('.hi').exists()).toBe(false);
    });
  });
});

关键修正点说明 #

• 组件实例隔离：把shallow(<Foo />)放在每个it内部，确保每个测试用例都使用全新的组件实例，避免测试间的状态干扰；
• 断言逻辑修正：完全匹配组件的渲染逻辑，正向验证预期元素/文本的存在，反向验证非预期元素的不存在；
• 更可靠的断言方式：用find()结合exists()检查元素存在性，用text()验证文本内容，比contains()更直观且不易出错。

这样修改后，两个测试场景应该都能正常通过了。

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