一：jest框架搭建
1.在本地创建一个目录jest_practice
2.使用编辑器VScode打开目录，紧接着在终端中打开，执行npm init
3.执行以下命令：
注意：这里我们使用cnpm去安装速度会更快，npm速度会很慢！
a.建议使用npm install –g jest(不需要单个去安装依赖)，修改package.json文件即可。
b.安装jest框架，以及依赖
cnpm install --save-dev jest babel-jest babel-core babel-preset-env regenerator-runtime
cnpm i --save-dev @babel/plugin-transform-runtime
cnpm i --save-dev @babel/preset-env
cnpm install @babel/runtime
4.打开package.json文件，修改jest:
"test": "jest --config jest.config.json --no-cache --colors --coverage"**
5.搭建好之后需要写个demo来测试是否正确**
如上图说明jest框架搭建成功，进入编写case主题
%stmts是语句覆盖率（statement coverage）：是不是每个语句都执行了？
%Branch分支覆盖率（branch coverage）：是不是每个if代码块都执行了？
%Funcs函数覆盖率（function coverage）：是不是每个函数都调用了？
%Lines行覆盖率（line coverage）：是不是每一行都执行了？
6.报告配置
需要在module层执行npm install jest-html-reporters --save-dev
新增jest.config.json
{
"reporters": [
"default",
["./node_modules/jest-html-reporters", {
"publicPath": "./test/html-reports",
"filename": "report.htm",
"pageTitle": "Test Report",
"expand": true
}]
]
}
执行完case会在html-report目录下生成report.html报告
完整报告：
报错详情：
7.执行case方式:
三者都可以，需要安装yarn(cnpm install yarn)
1.npm test //执行全量test.js后缀的文件
2.yarn test --watchALL
3.jest Hook.test.js //执行单个case
二：开工须知
Jest背景：
Jest是 Facebook 发布的一个开源的、基于 Jasmine 框架的 JavaScript单元测试工具。提供了包括内置的测试环境DOM API支持、断言库、Mock库等，还包含了Spapshot Testing、 Instant Feedback等特性。
Enzyme：
React测试类库Enzyme提供了一套简洁强大的API，并通过jQuery风格的方式进行DOM处理，开发体验十分友好。不仅在开源社区有超高人气，同时也获得了React官方的推荐。
1.举例，被测函数：
文件名：Hook.js
constructor() {
this.init();
}
init() {
this.a = 1;
this.b = 1;
}
sum() {
return this.a + this.b;
}
}
module.exports = Hook;
文件名：Hook.test.js
describe('hook', () => {
const hook = new Hook();
// 每个测试用例执行前都会还原数据，所以下面两个测试可以通过。
beforeEach(() => {
hook.init();
});
test('test hook 1', () => {
hook.a = 2;
hook.b = 2;
expect(hook.sum()).toBe(4);
});
test('test hook 2', () => {
expect(hook.sum()).toBe(2);// 测试通过
});
});
执行此目录下以test.js结尾的case ：jest –colors –coverage 结果如下：
执行单个case：jest Hook.test.js –colors –coverage
会在html-report目录下生成report.html文件
2.SnapShot Testing（快照测试）:
快照测试第一次运行的时候会将被测试ui组件在不同情况下的渲染结果保存一份快照文件。后面每次再运行快照测试时，都会和第一次的比较，若组件代码有所改变，则快照测试会失败，如果组件代码是最新的，优化过得代码，则需要更新快照，免得每次执行报错。
更新快照命令：jest --updateSnapshot
被测组件代码如下：
//被测组件
import React from 'react';
const STATUS = {
HOVERED: 'hovered',
NORMAL: 'normal',
};
export default class Link extends React.Component {
constructor() {
super();
this.state = {
class: STATUS.NORMAL,
};
}
_onMouseEnter = () => {
this.setState({class: STATUS.HOVERED});
};
_onMouseLeave = () => {
this.setState({class: STATUS.NORMAL});
};
render() {
return (
<a
className={this.state.class}
href={this.props.page || '#'}
onMouseEnter={this._onMouseEnter}
onMouseLeave={this._onMouseLeave}
>
{this.props.children}
</a>
);
}
}
快照测试case：
import React from "react";
import Link from "./Link.react";
import renderer from "react-test-renderer";// react-test-renderer则负责将组件输出成 JSON 对象以方便我们遍历、断言或是进行 snapshot 测试
//React 组件的 render 结果是一个组件树，并且整个树最终会被解析成一个纯粹由 HTML 元素构成的树形结构
it("renders correctly", () => {
const tree = renderer
.create(<Link page="http://www.instagram.com">Instagram</Link>)
.toJSON();
expect(tree).toMatchSnapshot();
});
it("renders as an anchor when no page is set", () => {
const tree = renderer.create(<Link>Facebook</Link>).toJSON();
expect(tree).toMatchSnapshot();
});
it("properly escapes quotes", () => {
const tree = renderer
.create(<Link>{"\"Facebook\" \\'is \\ 'awesome'"}</Link>)
.toJSON();
expect(tree).toMatchSnapshot();
});
it("changes the class when hovered", () => {
const component = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
// manually trigger the callback
tree.props.onMouseEnter();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();
// manually trigger the callback
tree.props.onMouseLeave();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it("renders correctly", () => {
const tree = renderer
.create(<Link page="https://prettier.io">Prettier</Link>)
.toJSON();
expect(tree).toMatchInlineSnapshot(`
<a
className="normal"
href="https://prettier.io"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
Prettier
</a>
`);
});
//1.通常，在对象中有一些字段需要快照，这些字段是生成的（比如id和Dates）。如果尝试对这些对象进行快照，它们将强制快照在每次运行时失败.
//2.Jest允许为任何属性提供非对称匹配器。在写入或测试快照之前，将检查这些匹配器，然后将其保存到快照文件而不是接收到的值
it('will check the matchers and pass', () => {
const user = {
createdAt: new Date(),
id: Math.floor(Math.random() * 20),
name: 'LeBron James',
};
expect(user).toMatchSnapshot({
createdAt: expect.any(Date),
id: expect.any(Number),
});
});
生成快照文件：
快照文件：
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`changes the class when hovered 1`] = `
<a
className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
Facebook
</a>
`;
exports[`changes the class when hovered 2`] = `
<a
className="hovered"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
Facebook
</a>
`;
exports[`changes the class when hovered 3`] = `
<a
className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
Facebook
</a>
`;
exports[`properly escapes quotes 1`] = `
<a
className="normal"
href="#"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
"Facebook" \\'is \\ 'awesome'
</a>
`;
exports[`renders as an anchor when no page is set 1`] = `
<a
className="normal"
href="#"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
Facebook
</a>
`;
exports[`renders correctly 1`] = `
<a
className="normal"
href="http://www.instagram.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
Instagram
</a>
`;
exports[`will check the matchers and pass 1`] = `
Object {
"createdAt": Any<Date>,
"id": Any<Number>,
"name": "LeBron James",
}
`;
更新快照命令：jest --updateSnapshot
3.组件测试
组件代码：example 1
'user strict';
function timeGame(callback){
console.log('ready...go!!!');
setTimeout(() => {
console.log('Time is up ,please stop!!!');
callback && callback();
}, 1000);
}
module.exports = timeGame;
//export default timeGame;组件测试代码：
import { jest } from '@jest/globals';
import ReactTestUtils from 'react-dom/test-utils';
'user strict';
jest.useFakeTimers();
describe('时间计时器', () => {
test('wait 1 second before ending the game', () => {
const timeGame = require('./timeGame');
timeGame();
expect(setTimeout).toHaveBeenCalledTimes(1);
expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000)
});
test('calls the callback after 1 second ', () => {
const timeGame = require('./timeGame');
const callback = jest.fn();
timeGame(callback);
expect(callback).not.toBeCalled();
jest.runAllTimers();
expect(callback).toBeCalled();
expect(callback).toHaveBeenCalledTimes(1);
});
});
example2:
组件代码：
import React from "react";
class Button extends React.Component {
constructor() {
super();
this.state = {
disabled: false,
};
this.handClick = this.handClick.bind(this);
}
handClick() {
if (this.state.disabled) {
return;
}
if (this.props.onClick) {
this.props.onClick();
}
this.setState({ disabled: true });
setTimeout(() => {
this.setState({ disabled: false });
}, 200);
}
render() {
return (
<button className="my-button" onClick={this.handClick}>
{this.props.children}
</button>
);
}
}
export default Button;
组件测试代码：
import React from 'react';
//import TestRenderer from 'react-test-renderer';调用 TestRenderer 的 create 方法并传入要 render 的组件就可以获得一个 TestRenderer 的实例
import { jest } from '@jest/globals';
import ReactTestUtils from 'react-dom/test-utils';
import Button from './Button.jsx';
describe('组件测试', () => {
it('测试应该被回调', () => {
const onClickMock = jest.fn();
const testInstance = ReactTestUtils.renderIntoDocument(
<Button onClick={onClickMock}>hello</Button>
);
const buttonDom = ReactTestUtils.findRenderedDOMComponentWithClass(testInstance, 'my-button');
ReactTestUtils.Simulate.click(buttonDom);
expect(onClickMock).toHaveBeenCalled();
});
it('点击之后2秒之内是否可用', () => {
const testInstance = ReactTestUtils.renderIntoDocument(<Button>hello</Button>);
const buttonDom = ReactTestUtils.findRenderedDOMComponentWithClass(testInstance, 'my-button');
ReactTestUtils.Simulate.click(buttonDom);
expect(testInstance.state.disabled).toBeTruthy();
jest.useFakeTimers();
jest.advanceTimersByTime(100);
expect(testInstance.state.disabled).toBeTruthy();
jest.advanceTimersByTime(201);
expect(testInstance.state.disabled).toBeTruthy();
});
});
4.函数测试
//函数：去除空格
function removeSpace(s) {
if (s == undefined || s == "") {
return "";
} else {
return s.replace(/(^\s*)|(\s*$)/g, "");
}
}
export default removeSpace;函数测试：
import removeSpace from './removeSpace';
//带空格的字符串
test('Removal of space', function () {
const string = ' camelot.china ';
return expect(removeSpace(string)).toBe('camelot.china');
});
//字符串string = undefined
test('string == undifined', () => {
const string = undefined;
return expect(removeSpace(string)).toBe("")
});
//字符串string = ""
test('string = ""', () => {
const string = "";
return expect(removeSpace(string)).toBe("")
});
5.mock测试
//mock_fuction.js
export default {
sum(a , b){
return a + b
}
};
import React from 'react';
import mock_function from './mock_fuction';
import { jest } from '@jest/globals';
import { object } from 'prop-types';
//mock_fuction.test.js
test('测试jest.fn()', () => {
let mockFn = jest.fn();
let result = mockFn(1, 2, 3);
expect(result).toBeUndefined();
expect(mockFn).toHaveBeenCalledWith(1, 2, 3);
expect(mockFn).toBeCalled();
expect(mockFn).toBeCalledTimes(1);
});
test('sum(5, 5) ', () => {
expect(mock_function.sum(5, 5)).toBe(10);
});
test('测试jest.fn()返回固定值', () => {
let mockFn = jest.fn().mockResolvedValue('default');
expect(mockFn).toBe('default');
});
test('测试jest.fn()内部实现', () => {
let mockFn = jest.fn((num1, num2) => {
return num1 * num2;
});
expect(mockFn(9, 9)).toBe(100);
});
test('测试jest.fn()返回promise', async () => {
let mockFn = jest.fn().mockResolvedValue('default');
let result = await mockFn();
expect(result).toBe('default');
expect(Object.prototype.toString.call(mockFn())).toBe("[object Promise]")
});
