一：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]")
});

React官网测试
 Jest官网

React生态单元测试落地及策略

Jest单元测试

一：jest框架搭建

二：开工须知

热门文章

最新文章

相关课程

相关电子书

相关实验场景