testEnvironment:将用于测试的测试环境 默认jsdom;
testPathIgnorePatterns`:用正则来匹配不用测试的文件;
setupFilesAfterEnv:配置文件,在运行测试案例代码之前,Jest 会先运行这里的配置文件来初始化指定的测试环境;(例如enzyme 适配器初始化,enzyme.configure({ adapter: new Adapter() }))
moduleDirectories: [让jest支持自定义的模块解析,需要与webpack中的resolve.modules](https://ithelp.ithome.com.tw/articles/10246014)
coverageThreshold:测试覆盖率阈值;
collectCoverage: 设置输出报告,配置测试覆盖率是否开启,默认关闭,开启可能会影响单测速度;
coverageDirectory:报告输出路径;
collectCoverageFrom:告诉 jest 哪些文件需要经过单元测试测试;
moduleFileExtensions:告诉jest测试文件的类型;
transform:对于jest而言,很多文件都是解析不了的(jest支持的是cjs),需要用翻译官来进行处理,例如用babel-jest来处理js文件,利用jest-transform-stub将非js文件转换为jest可执行的js文件(处理css|图片|字体的预处理器,jest-transform-stub实际会返回一个空字符串,因为测试时不需要这些资源);
moduleNameMapper: 如果在webpack中配置了别名解析,比如把`@`设置为`/src`的别名,那么你也需要用`moduleNameMapper`选项为Jest增加一个匹配配置;
transformIgnorePatterns:转换前与所有源文件路径匹配的正则表达式模式字符串数组。如果测试路径与任何模式匹配,则不会对其进行转换(设置哪些文件不需要转译)。
testMatch:Jest 用于检测测试文件的 glob 模式。默认情况下,它会查找.js,.jsx,.ts和.tsx里面的文件__tests__夹,以及带有后缀的任何文件.test或.spec(如Component.test.js或Component.spec.js)。它还会找到名为test.js或 的文件spec.js。
诸如代码分隔等 webpack 特有的功能也是不支持的。如果要使用这些不支持的特性,你需要用 Mocha 取代 Jest 来运行你的测试,同时用 webpack 来编译你的组件。
不支持部分es6语法
- jest默认是支持commonjs规范的,只支持require这种引用。当我们在代码中用import ... from ... 这种es6引用方式时就会报错。解决办法:使用babel进行编译,将es6转换为node的模块化代码。jest 运行时内部先执行( jest-babel ),检测是否安装 babel-core,如果有babel-core,然后查看.babelrc 中的配置,根据配置文件进行转换,然后再进行测试。
测试ts文件
- jest: 不能直接运行ts文件,需要借助.babelrc 去解析 TypeScript 文件再进行测试,需要用babel-jest来进行处理这种情况。
前端的测试框架选择的是jest。jest 提供运行测试的能力,更像是一个测试的runner;enzyme 与 @testing-library/react 是react的测试库,主要负责渲染react组件,获取元素等。jest与react测试库有不同的分工,他们是彼此需要的。当运行npm run testut 是,jest会自动匹配__tests__文件夹下所有以test.js 或test.ts为后缀
enzyme与@testing-library/react区别:
enzyme:Enzyme 提供的一个重要功能便是组件的浅层渲染(Shallow Rendering)。它允许我们在运行测试时,只渲染父组件而不渲染其所有的子组件。浅层渲染十分快速,因此非常适合单元测试。
- shallow:浅渲染的虚拟DOM对象
- render:将React组件渲染成静态的HTML字符串,然后分析这段HTML代码的结构,返回一个对象,对于snapshot使用。
- mount:将React组件加载为真实DOM节点,会渲染当前组件以及所有的子组件。
@testing-library/react 中的 render 方法,此方法会深度遍历依赖,渲染得到完整的 dom 结构 —— 如果没有针对指定组件进行 mock 的话。
- 由于是深度遍历依赖,所以可能会出现很多奇怪的报错,一般对报错的地方进行mock或者根据提示解决问题就行。因为有些组件有全局依赖属性,测试的时候没有就会报错。 2. 一般来说如果报错部分其实和测试无关,可以直接 mock 掉,如果比较重要就建议补全对应依赖。 3. 此方法依赖一个”类浏览器“环境,一般是使用 jsdom 模拟。
- 由于已经完全渲染到了“类浏览器”环境中,所以测试用例之间能够互相影响,建议每个测试用例执行完毕之后都清理掉 1. 高版本已经默认会自动清理