React+Umi 项目单元测试最佳实践: Jest 和 Enzyme 入门

在 React+Umi 的项目中进行单元测试时，可以使用 Jest 和 Enzyme 作为测试框架和工具。\n\n以下是一个简单的示例，演示如何编写一个组件的单元测试：\n\n1. 安装必要的依赖：\n\nbash\nnpm install jest enzyme enzyme-adapter-react-16 react-test-renderer --save-dev\n\n\n2. 在项目根目录下创建一个名为__tests__的文件夹。\n\n3. 在__tests__文件夹中创建一个名为Button.test.js的文件，用于编写组件的测试用例。\n\njavascript\nimport React from 'react';\nimport { shallow } from 'enzyme';\nimport Button from '../Button';\n\ndescribe('Button Component', () => {\n it('should render button correctly', () => {\n const wrapper = shallow(<Button />);\n expect(wrapper.find('button')).toHaveLength(1);\n });\n\n it('should call onClick function when button is clicked', () => {\n const mockOnClick = jest.fn();\n const wrapper = shallow(<Button onClick={mockOnClick} />);\n wrapper.find('button').simulate('click');\n expect(mockOnClick).toHaveBeenCalledTimes(1);\n });\n});\n\n\n在上面的示例中，我们首先导入了 React、shallow 和 Button 组件。然后，我们使用describe函数对 Button 组件进行描述，并在it函数中定义了两个测试用例。\n\n第一个测试用例测试了 Button 组件是否能正确渲染一个按钮元素。\n\n第二个测试用例测试了当按钮被点击时，是否能正确调用传入的onClick函数。\n\n4. 运行单元测试：\n\n在项目根目录下运行以下命令来执行单元测试：\n\nbash\nnpm test\n\n\nJest 会自动查找__tests__文件夹中的测试文件，并执行测试用例。测试结果会显示在命令行中。\n\n这只是一个简单的示例，你可以根据你的项目需求编写更多的测试用例来覆盖不同的场景和组件。同时，你还可以使用更多的 Enzyme API 来进行组件的模拟和断言。