React教程(十二) : 测试

测试框架：Jest + Enzyme
一句话来说，Jest的作用是跑test case， Enzyme的作用是在内存中渲染React组件，并对生成的DOM做比较。

1: 安装Enzyme:
npm install --save-dev enzyme
npm install --save-dev enzyme-adapter-react-16
如果项目用的type script，还要安装如下依赖
npm install --save-dev @types/enzyme @types/enzyme-adapter-react-16

Jest是create-react-app自带的, 不用特别安装

2: 配置
目录src下新建 setupTest.js
加入以下代码

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });

3: 在先前的代码示例中，https://github.com/992990831/modernization/tree/main/full-demo
找到RightNav.tsx组件，在同级目录下新建RightNav.test.tsx文件，加入以下代码

import React from 'react';
import { shallow, mount } from 'enzyme';

import RightNav from './RightNav';
import { Link } from 'react-router-dom';

describe('right navigation bar', () => {
  it('Should render without crashing', () => {
    shallow(<RightNav />);
  });

  it("should contain 5 links", () => {
    const nav = shallow(<RightNav />);
    expect(nav.find(Link).length).toBe(5);
  });
});

上述代码的含义很直接，一个test suite包含了两个test cases。 第一个test case验证RightNav组件是否正常渲染，第二个test case验证RightNav组件中是否包含了5个link。

参考：https://www.smashingmagazine.com/2020/06/practical-guide-testing-react-applications-jest/