内容如题

Jest

globals API

  • describe(name, fn)：描述块，讲一组功能相关的测试用例组合在一起
  • it(name, fn, timeout)：别名test，用来放测试用例
  • afterAll(fn, timeout)：所有测试用例跑完以后执行的方法
  • beforeAll(fn, timeout)：所有测试用例执行之前执行的方法
  • afterEach(fn)：在每个测试用例执行完后执行的方法
  • beforeEach(fn)：在每个测试用例执行之前需要执行的方法

常见断言

  1. expect(value)：要测试一个值进行断言的时候，要使用expect对值进行包裹
  2. toBe(value)：使用Object.is来进行比较，如果进行浮点数的比较，要使用toBeCloseTo
  3. not：用来取反
  4. toEqual(value)：用于对象的深比较
  5. toMatch(regexpOrString)：用来检查字符串是否匹配，可以是正则表达式或者字符串
  6. toContain(item)：用来判断item是否在一个数组中，也可以用于字符串的判断
  7. toBeNull(value)：只匹配null
  8. toBeUndefined(value)：只匹配undefined
  9. toBeDefined(value)：与toBeUndefined相反
  10. toBeTruthy(value)：匹配任何使if语句为真的值
  11. toBeFalsy(value)：匹配任何使if语句为假的值
  12. toBeGreaterThan(number)： 大于
  13. toBeGreaterThanOrEqual(number)：大于等于
  14. toBeLessThan(number)：小于
  15. toBeLessThanOrEqual(number)：小于等于
  16. toBeInstanceOf(class)：判断是不是class的实例
  17. anything(value)：匹配除了null和undefined以外的所有值
  18. resolves：用来取出promise为fulfilled时包裹的值，支持链式调用
  19. rejects：用来取出promise为rejected时包裹的值，支持链式调用
  20. toHaveBeenCalled()：用来判断mock function是否被调用过
  21. toHaveBeenCalledTimes(number)：用来判断mock function被调用的次数
  22. assertions(number)：验证在一个测试用例中有number个断言被调用
  23. extend(matchers)：自定义一些断言

jest.fn

Jest.mock

Enzyme

三种渲染方法

  1. shallow：浅渲染，是对官方的Shallow Renderer的封装。将组件渲染成虚拟DOM对象，只会渲染第一层，子组件将不会被渲染出来，使得效率非常高。不需要DOM环境， 并可以使用jQuery的方式访问组件的信息
  2. render：静态渲染，它将React组件渲染成静态的HTML字符串，然后使用Cheerio这个库解析这段字符串，并返回一个Cheerio的实例对象，可以用来分析组件的html结构
  3. mount：完全渲染，它将组件渲染加载成一个真实的DOM节点，用来测试DOM API的交互和组件的生命周期。用到了jsdom来模拟浏览器环境

三种方法中，shallow和mount因为返回的是DOM对象，可以用simulate进行交互模拟，而render方法不可以。一般shallow方法就可以满足需求，如果需要对子组件进行判断，需要使用render，如果需要测试组件的生命周期，需要使用mount方法。

常用方法

  1. simulate(event, mock)：模拟事件，用来触发事件，event为事件名称，mock为一个event object
  2. instance()：返回组件的实例
  3. find(sel1·ector)：根据选择器查找节点，selector可以是CSS中的选择器，或者是组件的构造函数，组件的display name等
  4. at(index)：返回一个渲染过的对象
  5. get(index)：返回一个react node，要测试它，需要重新渲染
  6. contains(nodeOrNodes)：当前对象是否包含参数重点 node，参数类型为react对象或对象数组
  7. text()：返回当前组件的文本内容
  8. html()： 返回当前组件的HTML代码形式
  9. props()：返回根组件的所有属性
  10. prop(key)：返回根组件的指定属性
  11. state()：返回根组件的状态
  12. setState(nextState)：设置根组件的状态
  13. setProps(nextProps)：设置根组件的属性

单元测试也有测试策略：在 React 的典型架构下，一个典型的测试策略为：

  • reducer、selector 层的逻辑代码要求 100% 覆盖
  • saga（副作用）层：是否拿到了正确的参数、是否调用了正确的 API、是否保存了正确的数据、业务逻辑、异常逻辑五个层面要求 100%覆盖
  • action 层选择性覆盖：可不测
  • utils 层的纯函数要求 100% 覆盖
  • 组件层：
    • 分支渲染逻辑必测、事件、交互调用要求 100%覆盖；
    • @connect 过的高阶组件不测
    • 纯 UI 一般不测
  1. 跨组件交互的逻辑应该怎么测试
  2. 函数组件内部函数逻辑该如何进行测试
  3. mock, spyOn
  4. React测试技巧
  5. enzyme对于hooks组件支持checklist

React-test-library & Enzyme

React Testing Library Vs. Enzyme

  • 测试理念不同,rtl基于dom元素进行测试，不依赖于props和state;Enzyme基于组件实例测试
  • rtl的选择器类型与dom中的选择器不太一致