前端工程化-单元测试篇

23,210 阅读5分钟

在计算机编程中,单元测试(英语:Unit Testing)又称为模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。

程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类、或者派生类(子类)中的方法。

----摘自维基百科

通俗的讲,在前端领域,单元测试就是 测试的单个模块,可以是一个函数,一个组件。

单元测试的优点如下:

  • 单元测试是一种验证行为
  • 单元测试是一种设计行为
  • 单元测试是一种编写文档行为
  • 单元测试是一种回归测试行为

目前来说,单元测试框架很多,本文将以jest为例进行探讨。

一. Jest初体验

jest是什么

jest是一款优雅,简洁的js测试框架,他支持babel, ts, node, react, angular, vue等各种框架。

他具备以下优点:

  • 安全快速
  • 完整的代码覆盖,只需要一行命令
  • 轻松模拟
  • 友好的错误提示
  • 强大的生态
  • 完备的文档

环境准备

  1. 初始化一个项目:
npm init
  1. 安装jest
yarn add jest -D

hello world

  1. 添加需要测试的文件
touch t.js

内容如下:

function sum(a, b) {
  return a + b;
}

module.exports = sum;
  1. 新建测试文件
touch t.test.js

测试脚本如下:

const sum = require("./index");

test("adds 1 + 2 to equal 3", () => {
  expect( sum(1, 2) ).toBe(3);
})
  1. 配置package.json
{
  ...,
  "scripts": {
    "test": "jest"
  }
}
  1. 执行 npm run test

image.png

二. Jest匹配器

在上述例子中, toBe就是一个匹配器,也是最简单的

toBe

toBe是判断精确相等,即 x === y

toEuqal

和toBe类似,也是判断相等,但他判断的是对象

toBeNull

结果至匹配null

toBeUndefined

结果只匹配undefined

toBeDefined

与toBeUndefined相反

toBeTruthy

匹配任何if语句为真,实际上就是期望结果是 true

toBeFalsy

匹配任何if语句为假,实际上就是期望结果是 false

toBeGreaterThan

匹配数字时使用,期望大于,即 result > xx

toBeGreaterThanOrEqual

匹配数字时使用,期望大于等于,即 result >= xx

toBeLessThan

匹配数字时使用,期望小于,即 result < xx

toBeLessThanOrEqual

匹配数字时使用,期望小于等于,即 result <= xx

toBeCloseTo

小数点精度问题匹配,有个经典的问题: 0.1 + 0.2 !== 0.3的,但我们期望等于,需要使用 toBeCloseTo

toMatch

匹配字符串时使用,希望字符串包含另一个字符串。

使用示例:

expect("abc").toMatch("a") // ok

toContain

数组操作,和indexOf一样,数组是否包含 xx。

使用示例:

expect( [1,2,3] ).toContain(1) // ok

更多

其他可以参考官方文档说明: jestjs.io/zh-Hans/doc…

三. Jest异步代码测试

测试代码,需要注意的是: jest 测试是同步执行的,如果直接写异步任务,会在异步之前就执行了测试期望。这个时候,我们需要手动执行done。

1. 异步函数

const axios = require("axios");
function fetchData() {
  return axios("http://localhost:3001/");
}

module.exports = fetchData;

2. 测试异步函数

const fetchData = require("./t");

test("fetch Data", (done) => {
  fetchData().then((data) => {
    expect(data.data).toBe("ok");  // ok
    done();
  });
});

四. Jest全局钩子

如果,我们需要在 执行测试之前 做些事件,或者执行之后,做些工作。 如果,我们需要在 每个test case之前或之后,做些事件

那么,我们可以使用:

beforeEach

在每个test case之前,执行


beforeEach(
  () => console.log("我是在每个test case 之前 执行")
)

afterEach

在每个test case之后,执行


afterEach(
  () => console.log("我是在每个test case 之后 执行")
)

beforeAll

在所有case之前执行, 只执行一次。

beforeAll(
  () => console.log("只执行一次,在所有test case之前执行")
)

afterAll

在所有case之后执行, 只执行一次。

afterAll(
  () => console.log("只执行一次,在所有test case之后执行")
)

五. mock函数

当我们需要模拟callback函数调用时,需要使用模拟函数。

demo

需要被测试的代码:

function sum(a, b, callback) {
  return callback(a + b);
}

module.exports = sum;

测试代码:

const sum = require("./t");

test("call", () => {
  const mockCallback = jest.fn();

  sum(1, 2, mockCallback);
  sum(3, 4, mockCallback);

  expect(mockCallback.mock.calls[0][0]).toBe(3);
  expect(mockCallback.mock.calls[1][0]).toBe(7);
});

其实,mock函数的主要使用了 jest.fn方法,每个这样的方法,都有mock这个属性。

mockCallback.mock属性,其数据结构如下:

{

  calls: [ [ 3 ], [ 7 ] ],

  instances: [ undefined, undefined ],

  invocationCallOrder: [ 1, 2 ],

  results: [

    { type: 'return', value: undefined },

    { type: 'return', value: undefined }

  ]

}

六. React + Jest

create / destroy

每次测试,都需要render到一个dom上,这就需要每次测试前,先创建一个div。结束之后,再删除。

import { unmountComponentAtNode } from "react-dom";

let container = null;

beforeAll(() => {
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterAll(() => {
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

act

它确保在进行任何断言之前,模块单元相关的所有更新都已处理并应用于 DOM

示例如下:

act(
  () => {
      // 渲染组件
  }
)
// 进行断言

render单元测试

需要被测试的组件:

import React from "react";

function Main() {
  return <div>a</div>;
}

export default Main;

单元测试代码:

import React from "react";
import { unmountComponentAtNode, render } from "react-dom";
import { act } from "react-dom/test-utils";
import Main from "./t";

let container = null;

beforeAll(() => {
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterAll(() => {
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

test("test", () => {
  act(() => {
    render(<Main />, container);
  });

  expect(container.textContent).toBe("a");
});

事件

DOM事件的测试,可以对结果做断言,使用jest.fn模拟函数。

react组件代码:

import React, { useState } from "react";

function Home(props) {
  const [state, setState] = useState(true);

  const handleClick = () => {
    setState(!state);
    props.onChange(!state);
  };

  return (
    <div>
      <button id="btn" onClick={() => handleClick()}>
        {state ? "a" : "b"}
      </button>
    </div>
  );
}

export default Home;

测试代码:

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import Home from "./index";

let container = null;
beforeEach(() => {
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("点击时更新值", () => {
  const onChange = jest.fn();
  act(() => {
    render(<Home onChange={onChange} />, container);
  });

  const button = document.getElementById("btn");
  expect(button.innerHTML).toBe("a");

  act(() => {
    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
  });

  expect(onChange).toHaveBeenCalledTimes(1);
  expect(button.innerHTML).toBe("b");
});

快照测试

jest会保存上一次的快照,当我们的组件发生变化时,jest会给出diff提示。

原始组件

import React from "react";

function Home(props) {
  return <div>测试</div>;
}

export default Home;

测试代码:

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import pretty from "pretty";
import Home from "./index";

let container = null;
beforeEach(() => {
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("点击时更新值", () => {
  act(() => {
    render(<Home />, container);
  });

  expect(pretty(container.innerHTML)).toMatchInlineSnapshot(
    `"<div>测试</div>"`
  );
});

运行如下:

image.png

当我们改变原始组件代码时(将测试文案修改为测试1),再次运行结果如下:

image.png

七. report

运行jest测试之后,项目中会出现一个coverage文件夹,里面有个index.html文件,打开之后,就能看到具体的测试报告了。 如下:

image.png

八. 总结

jest是react推崇的单元测试运行器,react框架本身也使用jest,社区生态支持完善。

配合react测试库,那真的是太香了~~

码字不易,请多点赞,关注~ 😽