网易云团队前端单元测试技术方案总结（三）

lsekfe

Jest 是 facebook 出的一个完整的[url=]单元测试[/url][url=]技术[/url]方案，集 测试框架, 断言库, 启动器, 快照，沙箱，mock工具于一身，也是 React 官方使用的测试工具。Jest 和 Jasmine 具有非常相似的 API ，所以在 Jasmine 中用到的工具在 Jest 中依然可以很自然地使用。可以近似看作 Jest = JSDOM 启动器 + Jasmine   。
　　虽然 Jest 提供了很丰富的功能，但是并没有内置 ES6 支持，所以依然需要根据不同运行时对代码进行转换，由于 Jest 主要运行在 Node 中，所以需要使用 babel-jest 将 ES Module 转换成 CommonJS 。
　　Jest 的默认配置：

1. npm install jest --save-dev
   
2. 　　npx jest --init
   
3. 　　√ Would you like to use Jest when running "test" script in "package.json"? ... yes
   
4. 　　√ Would you like to use Typescript for the configuration file? ... no
   
5. 　　√ Choose the test environment that will be used for testing ? jsdom (browser-like)
   
6. 　　√ Do you want Jest to add coverage reports? ... no
   
7. 　　√ Which provider should be used to instrument code for coverage? ? babel
   
8. 　　√ Automatically clear mock calls and instances between every test? ... yes

复制代码

在 Node 或 JSDOM 下增加 ES6代码的支持

1. npm install jest-babel @babel/core @babel/preset-env

复制代码

1. // .babelrc
   
2. 　　{
   
3. 　　    "presets": ["@babel/preset-env"]
   
4. 　　}

复制代码

1. 　// jest.config.js
   
2. 　　// 下面两行为默认配置，不写也可以
   
3. 　　{
   
4. 　　+    testEnvironment: "jsdom",
   
5. 　　+    transform: {"\\.[jt]sx?$": "babel-jest"}
   
6. 　　}

复制代码

使用 Jest 生成测试报告：

　对于 React 和 TypeScript 支持也可以通过修改 babel 的配置解决。

1. 　　npm install @babel/preset-react @babel/preset-typescript --save-dev
   

复制代码

1. 　// .babrlrc
   
2. 　　{
   
3. 　　    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
   
4. 　　}

复制代码

　Jest 在真实[url=]浏览器[/url]环境下测试
　　目前 Jest 不支持直接在真实浏览器中进行测试，其默认的启动器只提供了一个 JSDOM 环境，在浏览器中进行单元测试目前只有 Karma 方案能做到，所以也可以使用 Karma + Jest 方案实现，但是不建议这么做，因为 Jest 自身太重，使用 Karma + Jasmine 能达到基本一样的效果。
　　另外还有一个比较流行的 E2E 方案 Jest + Puppeteer  ,  由于 E2E  不属于单元测试范畴，这里不再展开。
　　Jest 工具链总结：
　　· Node 环境下测试 : Jest + babel
　　· JSDOM 测试 : Jest + babel
　　· 真实浏览器测试(不推荐)
　　· E2E 测试 : Jest + Puppeteer
　　稍作总结
　　上面的内容介绍了 chai ,  mocha , karma , jasmine 和 jest, 每种工具分别对应一些自己特有的工具链，在选取合适的测试工具时根据实际需要选择， 测试领域还有非常多的工具数都数不过来，下面来看下 React 单元测试的一些方法。
　　使用 Jest + Enzyme 对 React 进行单元测试


Enzyme基础配置如下:

npm install enzyme enzyme-adapter-react-16 jest-enzyme jest-environment-enzyme jest-canvas-mock react@16 react-dom@16 --save-dev

1. 　// jest.config.js
   
2. 　　{
   
3. 　　- "testEnvironment": "jsdom",
   
4. 　　+  setupFilesAfterEnv: ["jest-enzyme", "jest-canvas-mock"],
   
5. 　　+  testEnvironment: "enzyme",
   
6. 　　+  testEnvironmentOptions: {
   
7. 　　+    "enzymeAdapter": "react16"
   
8. 　　+  },
   
9. 　　}

复制代码

jest-canvas-mock 这个包是为了解决一些使用 JSDOM 未实现行为触发警告的问题。
　　上面建立了一个使用 Enzyme 比较友好的环境，可以直接在全局作用域里引用 React , shallow, mount 等 API。此外 Enzyme 还注册了许多友好的断言函数到 Jest 中，如下所示：

1. toBeChecked()
   
2. 　　toBeDisabled()
   
3. 　　toBeEmptyRender()
   
4. 　　toExist()
   
5. 　　toContainMatchingElement()
   
6. 　　toContainMatchingElements()
   
7. 　　toContainExactlyOneMatchingElement()
   
8. 　　toContainReact()
   
9. 　　toHaveClassName()
   
10. 　　toHaveDisplayName()
    
11. 　　toHaveHTML()
    
12. 　　toHaveProp()
    
13. 　　toHaveRef()
    
14. 　　toHaveState()
    
15. 　　toHaveStyle()
    
16. 　　toHaveTagName()
    
17. 　　toHaveText()
    
18. 　　toIncludeText()
    
19. 　　toHaveValue()
    
20. 　　toMatchElement()
    
21. 　　toMatchSelector()

复制代码

1. // js/ClassComponent.js
   
2. 　　import React from 'react';
   
3. 　　export default class ClassComponent extends React.PureComponent {
   
4. 　　    constructor() {
   
5. 　　        super();
   
6. 　　        this.state = { name: 'classcomponent' };
   
7. 　　    }
   
8. 　　    render() {
   
9. 　　        return (
   
10. 　　            <div>
    
11. 　　                a simple class component
    
12. 　　                <CustomComponent />
    
13. 　　            </div>
    
14. 　　        );
    
15. 　　    }
    
16. 　　}
    
17. 　　// test/hook.test.js
    
18. 　　import HookComponent from '../js/HookComponent';
    
19. 　　describe('HookComponent', () => {
    
20. 　　    it ('test with shallow', () => {
    
21. 　　        const wrapper = shallow(<HookComponent id={1} />);
    
22. 　　        expect(wrapper).toHaveState('name', 'classcomponent');
    
23. 　　        expect(wrapper).toIncludeText('a simple class component');
    
24. 　　        expect(wrapper).toContainReact(<div>a simple class component</div>);
    
25. 　　        expect(wrapper).toContainMatchingElement('CustomComponent');
    
26. 　　    })
    
27. 　　})

复制代码

Enzyme 提供了三种渲染组件方法：
　　· shallow 使用 react-test-renderer 将组件渲染成内存中的对象, 可以方便进行 props, state 等数据方面的测试，对应的操作对象为 ShallowWrapper，在这种模式下仅能感知到第一层自定义子组件，对于自定义子组件内部结构则无法感知。
　　· mount 使用 react-dom 渲染组件，会创建真实 DOM 节点，比 shallow 相比增加了可以使用原生 API 操作 DOM 的能力，对应的操作对象为 ReactWrapper ，这种模式下感知到的是一个完整的 DOM 树。
　　· render 使用 react-dom-server 渲染成 html 字符串，基于这份静态文档进行操作，对应的操作对象为 CheerioWrapper。