Jest
基础知识
expect 检查值是否满足特定条件。expect
使您可以访问许多“匹配器”,使您可以验证不同的事物
toBe 用于.toBe
比较原始值或检查对象实例的引用标识。它调用Object.is
比较值,这比严格的相等运算符更适合测试===
toEqual用于.toEqual
递归比较对象实例的所有属性(也称为“深度”相等)。它调用Object.is
比较原始值,这比严格的相等运算符更适合测试===
.toEqual
不会对两个错误执行深度相等性检查。只有message
Error 的属性被认为是相等的。建议使用.toThrow
匹配器进行错误测试。toContain
当你想检查一个项目是否在数组中时使用。为了测试数组中的项目,这使用===
, 严格的相等性检查。.toContain
也可以检查一个字符串是否是另一个字符串的子字符串。
.toHaveBeenCalledTimes
确保模拟函数被调用的确切次数。
例如,假设您有一个drinkEach(drink, Array<flavor>)
函数,它接受一个drink
函数并将其应用于传递的饮料数组。您可能想要检查 drink 函数被调用的确切次数。你可以用这个测试套件做到这一点:
wrapper.find(查找选择器)
wrapper.contains(验证元素是否存在)
遇到的问题
背景:nanoid是通过commonjs规范导出的(package.json中的main是index.cjs),默认情况下 项目内所有匹配到的文件都会走jest,所以我们不应该让cjs也走jest(import {nanoid} from 'nanoid'; 这个时候我们就引用了index.cjs),应该要排除它
解决方法:
jest.config.js 文件中排除cjs文件,避免走transform.js
mock方法
jest.mock('lodash.debounce', () => jest.fn(fn => { fn.cancel = jest.fn(); return fn; }) ); or jest.mock('lodash.debounce', () => fn => { fn.cancel = jest.fn(); return fn; });
const wrapper = mount(<Component />); wrapper.debug();
验证默认列表渲染
可以设置prop renderList 有一个默认方法,这样的话,无论内部结构怎么改,默认方法在unit test文件中都是可以直接验证的(参考 repeatList unit test)
配合使用的组件库
import { mount, shallow } from 'enzyme';
Enzyme 提供了一种挂载和遍历 React.js 组件树的机制。这将帮助我们访问它自己的属性和状态以及它的子属性,以便运行我们的断言。
Enzyme 为组件安装提供了两个基本功能:shallow
和mount
。该shallow
函数仅在内存中加载根组件,而mount
加载完整的 DOM 树(会加载所有生命周期)。
遇到的问题:
如果当前的组件不是通过DOM Render出来, 而是通过JS 创建, 那么无法通过jest拿到真实的DOM元素