时间戳

首页 > 技术文章 > jest enzyme unit test react

jest enzyme unit test react

Nyan-Workflow-FC 2019-12-20 15:18 原文

1. 测试类型

  • 单元测试：指的是以原件的单元为单位，对软件进行测试。单元可以是一个函数，也可以是一个模块或一个组件，基本特征就是只要输入不变，必定返回同样的输出。一个软件越容易些单元测试，就表明它的模块化结构越好，给模块之间的耦合越弱。React的组件化和函数式编程，天生适合进行单元测试
  • 功能测试：相当于是黑盒测试，测试者不了解程序的内部情况，不需要具备编程语言的专门知识，只知道程序的输入、输出和功能，从用户的角度针对软件界面、功能和外部结构进行测试，不考虑内部的逻辑
  • 集成测试：在单元测试的基础上，将所有模块按照设计要求组装成子系统或者系统，进行测试
  • 冒烟测试：在正式全面的测试之前，对主要功能进行的与测试，确认主要功能是否满足需要，软件是否能正常运行

2. 开发模式

  • TDD: 测试驱动开发，英文为Testing Driven Development，强调的是一种开发方式，以测试来驱动整个项目，即先根据接口完成测试编写，然后在完成功能是要不断通过测试，最终目的是通过所有测试
  • BDD: 行为驱动测试，英文为Behavior Driven Development，强调的是写测试的风格，即测试要写的像自然语言，让项目的各个成员甚至产品都能看懂测试，甚至编写测试

TDD和BDD有各自的使用场景，BDD一般偏向于系统功能和业务逻辑的自动化测试设计；而TDD在快速开发并测试功能模块的过程中则更加高效，以快速完成开发为目的。

3. Jest

Jest是Facebook开源的一个前端测试框架，主要用于React和React Native的单元测试，已被集成在create-react-app中。Jest特点：

  • 易用性：基于Jasmine，提供断言库，支持多种测试风格
  • 适应性：Jest是模块化、可扩展和可配置的
  • 沙箱和快照：Jest内置了JSDOM，能够模拟浏览器环境，并且并行执行
  • 快照测试：Jest能够对React组件树进行序列化，生成对应的字符串快照，通过比较字符串提供高性能的UI检测
  • Mock系统：Jest实现了一个强大的Mock系统，支持自动和手动mock
  • 支持异步代码测试：支持Promise和async/await
  • 自动生成静态分析结果：内置Istanbul，测试代码覆盖率，并生成对应的报告

4. Enzyme

Enzyme是Airbnb开源的React测试工具库库，它功能过对官方的测试工具库ReactTestUtils的二次封装，提供了一套简洁强大的 API，并内置Cheerio，
实现了jQuery风格的方式进行DOM 处理，开发体验十分友好。在开源社区有超高人气，同时也获得了React 官方的推荐。

三种渲染方法

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

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

常用方法

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

5. config explain

  • setupFilesAfterEnv：配置文件，在运行测试案例代码之前，Jest会先运行这里的配置文件来初始化指定的测试环境
  • moduleFileExtensions：代表支持加载的文件名
  • testPathIgnorePatterns：用正则来匹配不用测试的文件
  • testRegex：正则表示的测试文件，测试文件的格式为xxx.test.js等
  • collectCoverage：是否生成测试覆盖报告，如果开启，会增加测试的时间
  • collectCoverageFrom：生成测试覆盖报告是检测的覆盖文件
  • moduleNameMapper：代表需要被Mock的资源名称
  • transform：用babel-jest来编译文件，生成ES6/7的语法， ts-jest编译typescript文件

6. jest对象

  • jest.fn(implementation)：返回一个全新没有使用过的mock function，这个function在被调用的时候会记录很多和函数调用有关的信息
  • jest.mock(moduleName, factory, options)：用来mock一些模块或者文件
  • jest.spyOn(object, methodName)：返回一个mock function，和jest.fn相似，但是能够追踪object[methodName]的调用信息，类似Sinon

7. 常见断言

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

8. 测试场景

对组件节点进行测试

it('should has Button', () => {
  const { wrapper } = setup();
  expect(wrapper.find('Button').length).toBe(2);
});

it('should render 2 item', () => {
  const { wrapper } = setupByRender();
  expect(wrapper.find('button').length).toBe(2);
});

it('should render item equal', () => {
  const { wrapper } = setupByMount();
  wrapper.find('.item-text').forEach((node, index) => {
    expect(node.text()).toBe(wrapper.props().list[index])
  });
});

it('click item to be done', () => {
  const { wrapper } = setupByMount();
  wrapper.find('Button').at(0).simulate('click');
  expect(props.deleteTodo).toBeCalled();
});

使用 snapshot 进行 UI 测试

it('renders correctly', () => {
 const tree = renderer
 .create(<TodoList {...props} />)
         .toJSON();

 expect(tree).toMatchSnapshot();
});

测试组件的内部函数

it('calls component handleTest', () => { // class中使用箭头函数来定义方法
 const { wrapper } = setup();
 const spyFunction = jest.spyOn(wrapper.instance(), 'handleTest');
 wrapper.instance().handleTest();
 expect(spyFunction).toHaveBeenCalled();
 spyFunction.mockRestore();
});

it('calls component handleTest2', () => { //在constructor使用bind来定义方法
 const spyFunction = jest.spyOn(TodoList.prototype, 'handleTest2');
 const { wrapper } = setup();
 wrapper.instance().handleTest2();
 expect(spyFunction).toHaveBeenCalled();
 spyFunction.mockRestore();
});

推荐阅读