前言

单元测试是用来测试程序中一小块性能的，比如说一个函数、一个类。它能很显著地进步我的项目的代码品质，升高呈现 Bug 的频率，并且也利于保护代码。

话虽如此，然而绝大多数人是不违心去写单测的。。不过不影响，多学点不是好事。

背景就不多做介绍，次要是实际。

注释

本次我的项目中，我用的框架是Jest。用法比较简单，这里简略介绍一下：

什么是单元测试？

单元测试（Unit Testing）又称为模块测试，是针对程序模块（软件设计的最小单位）来进行正确性测验的测试工作。

TDD:测试驱动开发

先编写测试用例，在测试用例的领导上来欠缺性能，当测试用例编写完并且都通过测试之后，相应的性能也就做完了。例如函数和组件库。但通常在代码发生变化的时候，测试用例也要进行相应的调整。

BDD:行为驱动开发

测试用例模仿用户的操作行为，通常在实现业务代码开发之后，以用户的操作为领导编写测试代码。当测试用例跑通之后，就能够认为零碎的整体流程曾经晦涩。BDD的模式实用于平时的业务代码开发，因为业务的需要有可能变更频繁，但操作流程有可能不会变动，当业务代码发生变化的时候，能够应用原来的测试用例持续跑代码，节俭了开发工夫。
TDD负责办法类、独立组件的测试。BDD则负责整体业务模块的测试。

为什么须要单测？

现状：
不足意识：没有单测意识，很多代码没有单测
不足设计：模块不足设计，互相耦合，写单测艰难
测试艰难：降级公共 API，人工测试验证艰难
测试不全面：局部代码分支泛滥，人工测试没方法笼罩所有分支

怎么掂量单测欠缺度？

单测欠缺水平的掂量用覆盖率来掂量

单测的意义

能力建设：一个具备开发教训的开发人员，基本上都会编写单元测试。即使不会，能够通过培训来疾速达成。从学习曲线上看，单元测试很容易上手。
晋升效率：可能通过 mock 数据，及早发现问题，而越早发现Bug，造成的节约就会越小。
谋求卓越：单元测试能够充当一个设计工具，它有助于开发人员去思考代码构造的设计，让代码更加有利于测试。
测试更全面：可能笼罩 QA 测试笼罩不到的状况，比方各种 if 分支、异样解决。
更有信念：降级公共 API 时，如果依赖这个 API 的所有代码单测都能通过，那咱们对这次代码降级是更有信念的。

理念介绍到此结束，接下来是相干实际

1. 断言

在Jest中应用最多的就是断言库，咱们能够用它来测试指标函数的输入是否与预期统一。

test("测试 2 + 2 = 4",()=>{  expect(sum(2,2)).toBe(4)})test("测试函数返回对象为 {name: 'zhi'}",()=>{  expect(getName()).toEqual({name:"zhi"})})

更多能够查看官网文档。

2. 异步代码测试

通常会有两种写法：

  • 回调函数
  • 函数返回promise

在测试异步代码的时候，通常返回的数据是不确定的，因而咱们只须要测试异步代码是否失常返回数据即可。

对于回调函数，如果像同步函数一样测试，是没有方法获取正确的断言后果

export const funcA = (callback: (data: number) => void): void => {  setTimeout(() => {    callback(1);  }, 1000);};test('funcA', () => {  funcA((data) => expect(data).toEqual(2));});

即便是这样，咱们的单测也能够通过。

这是因为jest在运行完funcA后就间接完结了，不会期待setTimeout的回调，天然也就没有执行expect断言。正确的做法是，传入一个done参数：

test('funcA', (done) => {  funcA((data) => {    expect(data).toEqual(2);    done();  });});

在回调执行完之后显式地通知jest异步函数执行结束，jest会等到执行了done()之后再完结，这样就能失去预期的后果了。

对于promise，只须要在test用例完结时，把Promise返回即可。

export const funcB = (): Promise<number> => {  return new Promise<number>((resolve) => {    setTimeout(() => {      resolve(1);    }, 1000);  });};test('funcB', () => {  return funcB().then((data) =>   expect(data).toEqual(1));});// 也能够应用awaittest('funcB', async () => {  const data = await funcB();  expect(data).toEqual(1);});

对于promise抛出异样，则须要应用 .catch 办法。这里有个须要留神的中央。增加 expect.assertions 来验证肯定数量的断言被调用。 否则，一个fulfilled状态的Promise不会让测试用例失败。

test('the fetch fails with an error', () => {  expect.assertionsassertions(1);  return fetchData().catch(e => expect(e).toMatch('error'));});

3. Mock

如果咱们须要测试回调函数是否执行，能够用mock。在这里想基于实际介绍一下mock的用法。

场景1：一个react hooks应用了react-router的useLocation。咱们想模仿这个有没有调用

import { renderHook, act } from '@testing-library/react-hooks';let mockLocation = jest.fn(() => {    return {        search: "test"    }})jest.mock("react-router-dom", () => {    return {        useLocation: () => mockLocation()    }})// 应用test("useTabChange", () => {    const { result, rerender } = renderHook(() => useTabChange());    expect(mockLocation).toBeCalled()})

咱们甚至能够给任何办法外部的函数模仿返回

例子2: 在业务中用到了一个'opa-fe-base'的库，咱们须要模仿一下返回

import { renderHook, act } from '@testing-library/react-hooks';let mockFn = jest.fn()jest.mock("opa-fe-base", () => ({ storeAPI: { getEntity: () => mockFn() } }))import useCountry from '../useCountry'describe("useCountry", () => {    test("useCountry to return SG", () => {        const { result, rerender } = renderHook(() => useCountry())        expect(result.current).toBe('SG')        mockFn = jest.fn(() => {            return { country: "ID" }        })        rerender()        act(() => {            expect(result.current).toBe('ID')        })          })})

上述例子能够看到，咱们模仿了'opa-fe-base'这个库返回了一个蕴含

storeAPI的对象，对象外部还有个mock的办法。咱们能够通过扭转mock办法的返回来判断返回是否达到预期。

留神：须要测试的函数import写在咱们mock的上面

最近在写单测的时候发现window.URL.createObjectURL事件能够间接应用jest.fn进行模仿。然而document的事件却模仿不胜利，查问文档发现能够应用jest.spyOn。

场景3：通过jest.spyOn 模仿document事件

const spyFn = jest.spyOn(document, 'createElement')const mockRevoke = jest.fn();describe("downloadBlobFile", () => {    beforeEach(() => {        window.URL.createObjectURL = jest.fn((blob) => {            return blob        })        window.URL.revokeObjectURL = mockRevoke;    })    test("downloadBlobFile must be called", () => {        downloadBlobFile({});        expect(spyFn).toBeCalled()        expect(mockRevoke).toBeCalled();    })    test("download createObjectUrl use", () => {        downloadBlobFile("test");        expect(window.URL.createObjectURL.mock.calls[0][0]).toEqual('test')    })})

4. 快照

帮忙咱们确保在保护代码的过程中不会对组件的 UI 进行扭转。

expect(组件实例).toMatchSnapshot()

在第一次执行时会生成快照，之后就会去比照每次的快照是否一样。

5. 举荐一个vs code jest 插件

Jest Runner

这个插件能够在咱们的test文件中渲染出按钮，帮忙咱们独自的运行或者调试某一个test或者describe。不须要全局运行。晋升效率。

最初

单测的编写是有意义的，然而往往在工作中囿于业务，没有机会写，且行且珍惜~~