Jest

基础知识

expect 检查值是否满足特定条件。expect使您可以访问许多“匹配器”，使您可以验证不同的事物
toBe 用于.toBe比较原始值或检查对象实例的引用标识。它调用Object.is比较值，这比严格的相等运算符更适合测试===
toEqual用于.toEqual递归比较对象实例的所有属性（也称为“深度”相等）。它调用Object.is比较原始值，这比严格的相等运算符更适合测试===
.toEqual不会对两个错误执行深度相等性检查。只有messageError 的属性被认为是相等的。建议使用.toThrow匹配器进行错误测试。
toContain当你想检查一个项目是否在数组中时使用。为了测试数组中的项目，这使用===, 严格的相等性检查。.toContain也可以检查一个字符串是否是另一个字符串的子字符串。


.toHaveBeenCalledTimes确保模拟函数被调用的确切次数。

例如，假设您有一个drinkEach(drink, Array<flavor>)函数，它接受一个drink函数并将其应用于传递的饮料数组。您可能想要检查 drink 函数被调用的确切次数。你可以用这个测试套件做到这一点：

wrapper.find(查找选择器)

wrapper.contains(验证元素是否存在)

expect(期望xxx).toBe(true/false)

 

遇到的问题

 

 背景：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;
});

 

enzyme库的debug, 可以查看容器的当前元素

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元素