react项目如何自动化测试
自动化测试工具选择
React项目常用的自动化测试工具包括Jest、React Testing Library、Cypress等。Jest是Facebook开发的JavaScript测试框架，适合单元测试和快照测试。React Testing Library专注于组件行为测试，鼓励以用户视角编写测试。Cypress用于端到端测试，模拟真实用户操作。
单元测试配置
安装Jest和React Testing Library作为开发依赖：
npm install --save-dev jest @testing-library/react @testing-library/jest-dom创建jest.config.js配置文件：
module.exports = {
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
}添加jest.setup.js文件导入扩展断言：
import '@testing-library/jest-dom/extend-expect'组件测试示例
测试一个简单的Button组件：
import { render, screen, fireEvent } from '@testing-library/react'
import Button from './Button'
test('按钮点击触发回调', () => {
const handleClick = jest.fn()
render(<Button onClick={handleClick}>点击</Button>)
fireEvent.click(screen.getByText(/点击/i))
expect(handleClick).toHaveBeenCalledTimes(1)
})快照测试
使用Jest的快照功能捕获组件渲染结果：
test('组件渲染匹配快照', () => {
const { container } = render(<Button />)
expect(container.firstChild).toMatchSnapshot()
})异步测试
测试包含异步操作的组件：
test('异步数据加载', async () => {
render(<AsyncComponent />)
await waitFor(() => {
expect(screen.getByText('加载完成')).toBeInTheDocument()
})
})端到端测试配置
安装Cypress进行完整流程测试：
npm install cypress --save-dev添加cypress/integration/spec.js测试文件：
describe('页面导航测试', () => {
it('应正确跳转到详情页', () => {
cy.visit('/')
cy.get('a.detail-link').click()
cy.url().should('include', '/detail')
})
})持续集成配置
在GitHub Actions中添加测试流程：
name: CI
on: [push]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm ci
- run: npm test
- run: npm run e2e测试覆盖率报告
在package.json中添加覆盖率脚本：
"scripts": {
"test:coverage": "jest --coverage"
}生成的覆盖率报告会显示在coverage/lcov-report目录中，包含各文件的代码覆盖情况统计。
