idea2020.2中@test是怎么测试的_浅谈前端自动化测试 Unit 篇

前言

----------------------------------------

在上一篇 浅谈前端自动化测试  - 介绍篇 里面我们提到了两类前端测试方法，

本篇主要针对 unit 测试 来进行展开。

维基百科：

在计算机编程中，单元测试(Unit Testing)又称为模块测试，是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类(超类)、抽象类、或者派生类(子类)中的方法。

正文

-----------------------------------------

说到 unit 测试，不得不说一下 TDD，众所周知 单元测试一般是由开发者，在开发软件的同时编写对应的单元测试，即在编写实现的同时完成单元测试，而不是写完代码再一次性补足。

测试先行，这正是TDD的做法，不做TDD，难以得到好的单元测试，TDD是获得可靠的单元测试的的唯一途径。

为什么要做 unit 测试

这里引用一下某某的话语：不做单元测试的代码无法保证后续不被破坏，无法重构，只能看着代码腐化。unit 测试 本身就是极致编程的一部分。

unit测试的作用/优势：

1.  代码质量保证

2.  为重构提供保障

3.  提升维护性 

4.  提升极致编程能力

怎么实现 unit 测试

常见的单元测试框架/库有 jest、mocha、jasmine...

jest star 33k

mocha star 20k

jasmine 15k

经过对比之后，选用了 github star 数量最高，功能最强大的 jest 作为unit 测试工具。

简单介绍一下 Jest: 

Jest是一个“零配置”的前端测试工具，具有诸如模拟和代码覆盖之类的开箱即用特性。内置 Mock / Matcher / Test Coverage / Snapshot Testing  功能，注重开发者体验。

下面介绍下怎么使用

首先安装 jest

npm install --save-dev jest

‍

然后给一个假定的待测函数 sum.js

function sum(a, b) {  return a + b;}module.exports = sum;

然后 创建一个 sum.test.js

const sum = require('./sum');test('adds 1 + 2 to equal 3', () => {  expect(sum(1, 2)).toBe(3);});

然后 运行 `jest` 命令， jest 会自动扫描 .test.js 后缀文件，控制台会输出

PASS  ./sum.test.js

那么 用 Jest 就成功地写出了一个测试。

当然了，这是最简单是用法，jest 的功能当然不止于此。

Mock 功能

const mockCallback = jest.fn(x => 42 + x);forEach([0, 1], mockCallback);// The mock function is called twiceexpect(mockCallback.mock.calls.length).toBe(2);// The first argument of the first call to the function was 0expect(mockCallback.mock.calls[0][0]).toBe(0);// The first argument of the second call to the function was 1expect(mockCallback.mock.calls[1][0]).toBe(1);// --- //// users.test.jsimport axios from 'axios';import Users from './users';jest.mock('axios');test('should fetch users', () => {  const users = [{name: 'Bob'}];  const resp = {data: users};  axios.get.mockResolvedValue(resp);  // or you could use the following depending on your use case:  // axios.get.mockImplementation(() => Promise.resolve(resp))  return Users.all().then(data => expect(data).toEqual(users));});

钩子函数

beforeAll(() => console.log('1 - beforeAll'));afterAll(() => console.log('1 - afterAll'));beforeEach(() => console.log('1 - beforeEach'));afterEach(() => console.log('1 - afterEach'));test('', () => console.log('1 - test'));describe('Scoped / Nested block', () => {  beforeAll(() => console.log('2 - beforeAll'));  afterAll(() => console.log('2 - afterAll'));  beforeEach(() => console.log('2 - beforeEach'));  afterEach(() => console.log('2 - afterEach'));  test('', () => console.log('2 - test'));});// 1 - beforeAll// 1 - beforeEach// 1 - test// 1 - afterEach// 2 - beforeAll// 1 - beforeEach// 2 - beforeEach// 2 - test// 2 - afterEach// 1 - afterEach// 2 - afterAll// 1 - afterAll

Snapshot Testing

import React from 'react';import renderer from 'react-test-renderer';import Link from '../Link.react';it('renders correctly', () => {  const tree = renderer    .create(<Link page="http://www.facebook.com">FacebookLink>)    .toJSON();  expect(tree).toMatchSnapshot();});

jest-puppeteer 

使用 npm 安装 jest-puppeteer 之后 就可以直接使用

describe('demo', () => {  beforeAll(async () => {    await page.goto('https://demo.com');  });  it('should be titled "Google"', async () => {    await expect(page.title()).resolves.toMatch('demo');  });});

想更深入的了解  直接访问  https://jestjs.io/ 

总结

-----------------------------------------

经过以上的介绍，应该对 jest 与 单元测试有了初步的了解与认识，其实前端测试并没有想象的那么复杂(迈过坎之后都是纸老虎)。

另外，对于前端的 unit 测试 ，社区上很多否定的声音  也有赞同的声音，这里不做评论，不过想说一句就是，如果追求完美与极致， unit 测试是很有必要的。

ps：如有不足 欢迎指正

欢迎     收藏      关注      在看， 点关注不迷路

------------------------------

一只前端小菜鸟  |  求知若渴  |  梦想与爱皆不可辜负

-----------------------------

如果对前端内容感兴趣， 请关注此公众号