React测试驱动开发 - 环境搭建
工欲善其事,必先利其器
久等了,本篇讲一下React项目测试环境搭建。
工具集
名称 | 作用 |
---|---|
jest | 测试框架 |
testing-library | 测试工具包 |
msw | mock接口请求 |
当然也会有一些其它可选的工具,如使用mocha代替jest,使用test-cafe、cypress等代替testing-library。这些随个人喜好可以调整。
下面分别介绍下三类工程的测试环境搭建:create-react-app、next.js、umijs。
在Create-React-App 工程中搭建测试环境
create-react-app中内置了测试功能,开箱即用。
首先使用create-react-app
命令初始化一个工程:
npx create-react-app with-cra
执行这个命令之后,就会得到一个名为with-cra
的工程了。
最新版本的create-react-app
中已经内置了测试套件,所以现在已经可以执行npm test
命令了。
看看它默认生成的测试文件:
1import { render, screen } from '@testing-library/react'; 2import App from './App'; 3 4test('renders learn react link', () => { 5 render(<App />); 6 const linkElement = screen.getByText(/learn react/i); 7 expect(linkElement).toBeInTheDocument(); 8});
执行npm test
可以看到如下的输出:
在Next.js工程中搭建测试环境
Next.js中并没有默认提供test套件,需要新建工程之后手动配置。
新建工程
执行 npx create-next-app with-nextjs
命令,新建一个名为with-nextjs
的Next.js工程。
此时执行npm test
可以看到Error: no test specified
的报错,因为它默认没有配置test套件。
安装&配置测试套件
首先,使用npm安装相关依赖:
1npm install --save-dev @testing-library/react jest @testing-library/jest-dom identity-obj-proxy
然后再加入以下的配置:
Package.json配置
package.json文件中,在"scripts"段中新增如下行:
1{ 2 "scripts": { 3 "test": "jest" 4 } 5}
Babel配置
添加.babelrc
配置文件,内容如下:
1{ 2 "presets": ["next/babel"] 3}
Jest配置
添加jest.config.json
配置文件,内容如下:
1{ 2 "moduleNameMapper": { 3 "\\.(css|less|scss|sass)$": "identity-obj-proxy" 4 }, 5 "testEnvironment": "jsdom" 6}
添加测试文件
在pages/index.js
同目录下,建立一个新文件index.spec.js
,并添加如下的内容:
1import { render, screen } from '@testing-library/react'; 2import '@testing-library/jest-dom' 3import Home from './index' 4 5test('renders get started', async () => { 6 render(<Home />); 7 const greetingElement = screen.getByText('Get started by editing'); 8 expect(greetingElement).toBeInTheDocument(); 9})
执行测试
运行npm test
,可以看到类似如下的输出,代表测试套件配置完成。
1> with-nextjs@0.1.0 test /Users/yudu/dev/banyudu/react-test-examples/examples/with-nextjs 2> jest 3 4 PASS pages/index.spec.js 5 ✓ renders get started (43 ms) 6 7Test Suites: 1 passed, 1 total 8Tests: 1 passed, 1 total 9Snapshots: 0 total 10Time: 1.112 s, estimated 2 s
在Umi.js工程中搭建测试环境
umi.js中也内置了测试功能,但不如CRA的好用,需要额外设置一下。
搭建一个umijs的工程
1mkdir with-umi 2cd with-umi 3npx @umijs/create-umi-app 4npm i
安装相关依赖
1npm install --save-dev @testing-library/react @testing-library/jest-dom babel-jest @babel/preset-react @babel/preset-env
添加Babel配置
1{ 2 "presets": ["@babel/preset-env", ["@babel/preset-react", { 3 "runtime": "automatic" 4 }]] 5}
添加Jest配置
修改package.json
文件,添加jest相关配置:
1{ 2 "jest": { 3 "moduleNameMapper": { 4 "\\.(css|less|scss|sass)$": "identity-obj-proxy" 5 }, 6 "transform": { 7 "\\.[jt]sx?$": "babel-jest" 8 }, 9 "testEnvironment": "jsdom" 10 } 11}
注意这里因为umi-test
没有读取jest.config.json
,而是读取的package.json
中的jest
key,所以不能把jest的配置独立提取成配置文件。
添加测试文件
1import { render, screen } from '@testing-library/react'; 2import '@testing-library/jest-dom' 3import Home from './index' 4 5test('renders Page index', async () => { 6 render(<Home />); 7 const greetingElement = screen.getByText('Page index'); 8 expect(greetingElement).toBeInTheDocument(); 9})
执行测试
执行测试,得到如下输出:
1➜ with-umi git:(main) npm test 2 3> @ test /Users/yudu/dev/banyudu/react-test-examples/examples/with-umi 4> umi-test 5 6 PASS src/pages/index.spec.tsx 7 ✓ renders Page index (25 ms) 8 9Test Suites: 1 passed, 1 total 10Tests: 1 passed, 1 total 11Snapshots: 0 total 12Time: 3.83 s 13Ran all test suites.
说明测试套件搭建成功。
总结
以上就是针对三种脚手架项目(create-react-app、next.js、umi.js)的测试套件搭建说明。相关的示例代码可以查阅Github项目。
下一期更新一些基础控件的测试套路,敬请期待。