如何用Enzyme/Jest测试React组件是否渲染指定文本的h3标签

首先得确认你已经装好了enzyme、对应React版本的适配器（比如React17用@wojtekmaj/enzyme-adapter-react-17）和jest这些依赖哈。

先给你补全组件的导出（你原来的代码没导出，测试的时候要用到）：

import styled from 'styled-components';

const ColumnTitle = styled.h3`
  color: green;
`;

const Column = (props) => {
  return (
    <ColumnTitle>{props.title}</ColumnTitle>
  )
};

export default Column; // 别忘了导出组件

然后是完整的测试代码，放在对应的Column.test.js文件里：

import { shallow } from 'enzyme';
import Column from './Column'; // 替换成你的组件实际路径

test('column contains h3 with correct text', () => {
  // 第一步：定义测试用的标题文本
  const testTitle = '我是测试标题';
  
  // 第二步：浅渲染组件，传入测试用的props
  const wrapper = shallow(<Column title={testTitle} />);
  
  // 第三步：做两个关键断言
  // 断言h3标签确实被渲染了
  expect(wrapper.find('h3').exists()).toBe(true);
  // 断言h3的文本内容和我们传入的一致
  expect(wrapper.find('h3').text()).toBe(testTitle);
  
  // 也可以用更简洁的写法，效果一样
  // expect(wrapper.find('h3')).toHaveLength(1);
  // expect(wrapper.find('h3').text()).toEqual(testTitle);
});

为啥这么写？给你拆解下： #

• 用shallow而不是mount：因为我们只关心这个Column组件本身的渲染，不需要渲染styled-components生成的底层结构，浅渲染足够用，还更高效。
• 明确传测试props：给组件一个固定的测试标题，这样断言的时候结果是确定的，不会有歧义。
• 两个断言缺一不可：既要确认h3标签存在，也要确认它的文本内容正确，这样才能保证组件按预期渲染。

如果是React18+的话，Enzyme的适配可能需要额外配置下，不过核心的测试逻辑是一样的。

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