初探：使用Jest进行React单元测试

在React项目里，如果你使用 Create React App，Jest 已经能够开箱即用且包含许多实用的默认配置。

在src文件夹目录下，有setupTests.js文件

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

写单元测试（示例）：

mock.js

export function helloWorld() {return 'helloWorld';
}

mock.test.js

import { helloWorld } from './mock'test('adds 1 + 2 to equal 3', done => {expect(helloWorld()).toBe('helloWorld');done()
});afterAll(done => { done() })

执行npm run test 进行单元测试

"test": "craco test --watchAll=false --coverage --collectCoverageFrom=src/mock/* --ci --reporters=default --reporters=jest-junit --forceExit"

会在根目录下生成coverage文件夹，里面有index.html 文件可以打开查看覆盖率

使用craco进行配置开发：

package.json

"scripts": {"dev": "GENERATE_SOURCEMAP=false cross-env PORT=5000 craco start","prd": "GENERATE_SOURCEMAP=false dotenv -e .env.production craco start","test2": "craco test --watchAll=false --coverage --ci --reporters=default --reporters=jest-junit --forceExit","test": "craco test --watchAll=false --coverage --collectCoverageFrom=src/mock/* --ci --reporters=default --reporters=jest-junit --forceExit","build": "GENERATE_SOURCEMAP=false craco build","build:dev": "dotenv -e .env.development craco build","build:dev-local": "dotenv -e .env.development.local craco build","build:test": "dotenv -e .env.test craco build","start-old": "cross-env PORT=5000 react-scripts start","build-old": "react-scripts build","test-old": "react-scripts test","eject": "react-scripts eject"},

craco.config.js文件里可以配置jest参数

module.exports = {webpack: {// 别名配置alias: {'@': pathResolve('src'),},module: {rules: [{// js 文件才使用 babeltest: /\.js$/,// 只在 src 文件夹下查找include: [pathResolve('src')],// 不会去查找的路径exclude: /node_modules/,use: [{loader: 'thread-loader',},{loader: 'babel-loader',options:{// 开启babel缓存// 第二次构建时，会读取之前的缓存cacheDirectory: true}  }]}]},/*** 重写 webpack 任意配置*  - configure 能够重写 webpack 相关的所有配置，但是，仍然推荐你优先阅读 craco 提供的快捷配置，把解决不了的配置放到 configure 里解决；*  - 这里选择配置为函数，与直接定义 configure 对象方式互斥；*/configure: (webpackConfig, {env, paths}) => {// paths.appPath='public'paths.appBuild = outputDirName // 配合输出打包修改文件目录// webpackConfig中可以解构出你想要的参数比如mode、devtool、entry等等，更多信息请查看webpackConfig.json文件/*** 修改 output*/webpackConfig.output = {...webpackConfig.output,path: path.resolve(__dirname, outputDirName), // 修改输出文件目录publicPath: process.env.REACT_APP_PUBLICPATH // 设置的是部署应用包的基本 URL，不是项目打包出来的文件存放的位置}// 返回重写后的新配置// return smp.wrap(webpackConfig)return webpackConfig},plugins: [// new SpeedMeasurePlugin(),// compression-webpack-plugin 因为版本问题，2.x将 asset 改为了 filename// new CompressionPlugin({//   filename: '[path].gz[query]', // 目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串//   algorithm: 'gzip', // 算法       //   test: new RegExp('\\.(js|css)$'), // 压缩 js 与 css//   threshold: 10240, // 只处理比这个值大的资源。按字节计算//   minRatio: 0.8 // 只有压缩率比这个值小的资源才会被处理// }),// new HardSourceWebpackPlugin() // 解决打包慢的问题]},plugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {modifyVars: { // '@primary-color': '#1DA57A','@heading-color': '#1890ff' // 标题色},javascriptEnabled: true,},},},}],jest: {collectCoverageFrom: ['src/mock/*']}
}

使用到的插件文档：

craco官方文档：Welcome | CRACO

jest官方文档：全局设定 · Jest

初探：使用Jest进行React单元测试相关推荐

使用Jest进行React单元测试
React单元测试方案前置知识为什么要进行测试测试可以确保得到预期的结果作为现有代码行为的描述促使开发者写可测试的代码,一般可测试的代码可读性也会高一点如果依赖的组件有修改,受影响的组件能 ...
Jest enzyme 进行react单元测试
下面的文章会默认读者了解 React及其技术栈以及基本的前端单元测试,由于本文涉及到的技术较多,故不宜一一在文中介绍,谅解. 写在前面在撰写单元测试用例之前,我们需要了解到撰写测试用例的原因.写测试 ...
react 单元测试 (jest+enzyme)
react 单元测试 (jest+enzyme) 为什么要做单元测试作为一个前端工程师,我是很想去谢单元测试的,因为每天的需求很多,还要去编写测试代码,感觉时间都不够用了. 不过最近开发了一个比较复 ...
React单元测试：Jest+Enzyme
一.概述本文介绍基于Jest+Enzyme的React单元测试编写方法,包括对组件.action.reducer和其他工具类和功能类js的测试.主要介绍对组件.action.reducer代码的单元 ...
React单元测试：Jest + Enzyme（二）
前言在上一篇教程中,我们成功搭建了基于Jest和Enzyme的单元测试框架并成功地跑起来第一个单元测试,可以点击这里回顾一下.今天,我们重点讨论如何通过Jest来mock数据. 什么是Mock Mo ...
Jest+Enzyme的单元测试技巧总结
技术选型 jest: 支持断言.Mock.Snapchat.Async测试.测试覆盖率等 enzyme:模拟了jQuery的APi,比较直观,学习使用都比较简单测试的原则测试代码时,只考虑测试,不 ...
Jest + Enzyme React 组件测试实践
≈ 最近把组件测试接入到日常开发,提高了项目代码健壮性,可维护性.本人也从0到1收获了组件测试的经验. 本文总结一下最近两周组件测试相关的研究,包括: Jest + Enzyme 的基本介绍 Je ...
jset编写测试vue代码_使用 Jest 进行 Vue 单元测试
本文介绍: 1.vue-cli3下jest环境的搭建 2.vue组件基本的测试方法环境配置 vue-cli3 的插件使安装流程变得格外简单,通过 vue ui 启动可视化管理系统,在插件栏,点击 ' ...
Jest 组件库单元测试【基础语法篇】
一.介绍 Jest 是 Facebook 出品的一个测试框架,相对其他测试框架,其一大特点就是就是内置了常用的测试工具,比如自带断言.测试覆盖率工具,实现了开箱即用. 此外, Jest 的测试用例是并 ...

初探：使用Jest进行React单元测试

初探：使用Jest进行React单元测试相关推荐

最新文章

热门文章