前端测试：Jest与React测试实战

前端测试Jest与React测试实战大家好我是欧阳瑞Rich Own。今天想和大家聊聊前端测试这个重要话题。作为一个全栈开发者测试是保障代码质量的关键。今天就来分享一下Jest和React测试的实战经验。为什么需要前端测试好处说明减少bug提前发现问题重构安全修改代码更有信心文档作用测试就是活文档团队协作明确功能预期Jest入门安装Jestnpm install --save-dev jest types/jest配置Jest{ jest: { testEnvironment: jsdom, transform: { ^.\\.tsx?$: ts-jest }, moduleFileExtensions: [ts, tsx, js, jsx], setupFilesAfterEnv: [rootDir/setupTests.ts] } }基本测试// sum.test.js function sum(a, b) { return a b; } test(adds 1 2 to equal 3, () { expect(sum(1, 2)).toBe(3); });React测试安装依赖npm install --save-dev testing-library/react testing-library/jest-dom组件测试// Button.test.jsx import { render, screen } from testing-library/react; import Button from ./Button; describe(Button, () { it(renders correctly, () { render(ButtonClick me/Button); const button screen.getByRole(button); expect(button).toBeInTheDocument(); expect(button).toHaveTextContent(Click me); }); it(calls onClick when clicked, () { const handleClick jest.fn(); render(Button onClick{handleClick}Click me/Button); const button screen.getByRole(button); button.click(); expect(handleClick).toHaveBeenCalledTimes(1); }); });异步测试// UserList.test.jsx import { render, screen, waitFor } from testing-library/react; import UserList from ./UserList; describe(UserList, () { it(loads and displays users, async () { render(UserList /); await waitFor(() { const users screen.getAllByRole(listitem); expect(users).toHaveLength(3); }); }); });Mock测试// api.test.js import axios from axios; import { fetchUsers } from ./api; jest.mock(axios); describe(fetchUsers, () { it(fetches users successfully, async () { const mockUsers [{ id: 1, name: Alice }]; axios.get.mockResolvedValue({ data: mockUsers }); const users await fetchUsers(); expect(axios.get).toHaveBeenCalledWith(/api/users); expect(users).toEqual(mockUsers); }); });测试覆盖率npm test -- --coverage总结前端测试是保障代码质量的重要手段。通过Jest和React Testing Library可以编写高质量的测试用例。我的鬃狮蜥Hash对测试也有自己的理解——它总是先测试蟋蟀是否安全才会食用这也许就是自然界的测试驱动开发吧如果你对前端测试有任何问题欢迎留言交流我是欧阳瑞极客之路永无止境技术栈Jest · React Testing Library · 前端测试