自动化测试之前端js单元测试框架jest

来源:http://www.chinese-glasses.com 作者:Web前端 人气:110 发布时间:2020-04-07
摘要:时间: 2019-10-14阅读: 106标签: 测试测试的类型 大多数开发者都知道需要写单元测试,但是不知道每个单元测试应用的主要内容以及如何做单元测试,在介绍jest测试框架前,我们先来了解

时间: 2019-10-14阅读: 106标签: 测试测试的类型

大多数开发者都知道需要写单元测试,但是不知道每个单元测试应用的主要内容以及如何做单元测试,在介绍jest测试框架前,我们先来了解下一些测试相关的概念。

测试是用来检查你代码的代码。测试会使你对自己的程序更有信心。它们还能够防止你在修复一个 bug 时生成另一个 bug。你可以测试程序的方方面面,从单个函数及其返回值到在浏览器中运行的复杂程序。由于这是本课程的第一篇文章,因此我会简要对比一些流行的测试类型。

为什么需要单元测试?

  • 保证质量:随着迭代的过程,开发人员很难记清所有的功能点,功能点的新增和删除在代码改变后,进行回归测试时,依靠人工QA很容易出错遗漏。
  • 自动化:通过编写测试用例,只需要编写一次,多次运行,同样的事情不需要从头再来测一遍,很多时候QA的工作量就是这么增加的,新的版本上线,人工QA都需要所有的功能点从新测试一遍。
  • 特性文档:单元测试可以作为描述和记录代码所实现的所有需求,有时候可以作为文档来使用,了解一个项目可以通过阅读测试用例比看需求文档更清晰。
  • 驱动开发,指导设计:代码被测试的前提是代码本身的可测试性,那么要保证代码的可测试性,就需要在开发中注意API的设计,TDD将测试前移就是起到这么一个作用

单元测试

测试类型

你可能接触过各种测试框架、大体上,最重要测试类型有:

  • 单元测试- 依靠模拟输入证实是否是期望的输出来分别的测试函数或者类。
  • 集成测试 - 测试若干模块来确保他们像预期的那样工作。
  • 功能测试- 在产品本身(例如在浏览器上)对一个场景进行操作,而不考虑内部结构以确保预期的行为。

单元测试覆盖了代码块,确保它们在运行时没有问题。被测试的单元可以是函数、模块和类等。单元测试应该相互隔离并且彼此独立。对于给定的输入,用单元测试检查结果,通过尽早发现问题并避免退化,可以帮助你确保程序的每个部分都能按预期工作。

测试工具类型

测试工具可以分为以下功能,有些提供一个功能,有些提供了一个组合。
使用工具组合是很常见的,即使你可以使用单一的工具实现同样的功能,是所有组合可以获得更灵活的功能。

  1. 测试环境(Mocha , Jasmine, Jest, Karma
  2. 测试结构 (Mocha , Jasmine, Jest, Cucumber
  3. 断言函数(Chai, Jasmine, Jest, Unexpected
  4. 生成,显示、监听测试结果(Mocha , Jasmine, JestKarma
  5. 生成,比较组件和数据结构的快照,以确保之前运行的更改是预期的。(Jest,Ava
  6. mocks。(sinon.js) 目前使用最多的mock库,将其分为spies、stub、fake XMLHttpRequest、Fake server、Fake time几种,根据不同的场景进行选择。
  7. 生成代码覆盖率报告。(Istanbul, Jest
  8. 浏览器或者类浏览器环境执行控制。(Protractor , Nightwatch, Phantom, Casper

集成测试

单元测试技术的实现原理

  1. 测试框架:判断内部是否存在异常,存在则console出对应的text信息
  2. 断言库:当actual值与expect值不一样时,就抛出异常,供外部测试框架检测到,这就是为什么有些测试框架可以自由选择断言库的原因,只要可以抛出异常,外部测试框架就可以工作。
  3. mock函数:创建一个新的函数,用这个函数来取代原来的函数,同时在这个新函数上添加一些额外的属性,例如called、calledWithArguments等信息
function describe (text, fn) {
    try {
        fn.apply(...);
    } catch(e) {
        assert(text)
    }
}
function fn () {
    while (...) {
        beforeEach();
        it(text, function () {
            assert();
        });
        afterEach();
    }
}
function it(text, fn) {
  ...
  fn(text)
  ...
}
function assert (expect, actual) {
    if (expect not equla actual ) {
        throw new Error(text);
    }
}

function fn () {
  ...
}

function spy(cb) {
  var proxy = function () {
    ...
  }
  proxy.called = false;
  proxy.returnValue = '...';
  ...
  return proxy;
}

var proxy = spy(fn); // 得到一个mock函数

即使你的所有单元测试都通过了,也只能代表每个部分可以正常工作。尽管如此,该程序仍可能失败。集成测试涵盖跨模块流程,其中各个模块在一起工作时进行组合和测试。多亏了他,你可以用一种方法来确保你的代码在整体上能够正常运行。

测试用例的钩子

describe块之中,提供测试用例的四个钩子:before()、after()、beforeEach()和afterEach()。它们会在指定时间执行。

describe('hooks', function() {

  before(function() {
    // 在本区块的所有测试用例之前执行
  });

  after(function() {
    // 在本区块的所有测试用例之后执行
  });

  beforeEach(function() {
  // 在本区块的每个测试用例之前执行
    this.closeFunc = sinon.stub();
    this.Modal = TestUtils.renderIntoDocument(
      <Modal title="whatever" handleClose={this.closeFunc}>
        <div className="m-content">
          <p className="m-text">Just some noddy content</p>
          <a href="#" className="other-link">Click me</a>
        </div>
      </Modal>
    );
    this.eventStub = {
      preventDefault: sinon.stub(),
      stopPropagation: sinon.stub(),
    };
  });

  afterEach(function() {
    // 在本区块的每个测试用例之后执行
  });

  // test cases

  it('should have a title', function() {
    var title = helpers.findByTag(this.Modal, 'h2');
    assert.equal(findDOMNode(title).firstChild.nodeValue, 'whatever');
  });

  it('should have child content', function() {
    var content = helpers.findByClass(this.Modal, 'm-content');
    assert.equal(findDOMNode(content).nodeName.toLowerCase(), 'div');
  });

  it('should have child paragraph', function() {
    var text = helpers.findByClass(this.Modal, 'm-text');
    assert.equal(findDOMNode(text).firstChild.nodeValue,
                 'Just some noddy content');
  });


});

端到端测试(E2E)

如何写单元测试用例

与其他类型的测试相反,端到端测试始终在浏览器(或类似浏览器)环境中运行。它可能是打开的真正浏览器,并且在其中运行测试。它也可能是无头浏览器环境,即没有用户界面运行的浏览器。 E2E 测试的重点是在我们正在运行的程序中模拟实际用户。他们将模拟滚动,单击和键入之类的行为,并从实际用户的角度检查我们的程序是否运行良好。

一些好的建议:

  • 只考虑测试,不考虑内部实现
  • 不要做无谓的断言
  • 让每个单元测试保持独立
  • 所有的方法都应该写单元测试
  • 充分考虑数据的边界条件
  • 对重点、复杂、核心代码,重点测试
  • 利用AOP(beforeEach、afterEach),减少测试代码数量,避免无用功能
  • 使用最合适的断言方式

TDD
一句话简单来说,就是先写测试,后写功能实现。TDD的目的是通过测试用例来指引实际的功能开发,让开发人员首先站在全局的视角来看待需求。具体定义可以查看维基;

BDD
行为驱动开发要求更多人员参与到软件的开发中来,鼓励开发者、QA、相关业务人员相互协作。BDD是由商业价值来驱动,通过用户接口(例如GUI)理解应用程序。详见维基.
<blockquote>


用 Jest 进行单元测试

Jest介绍--Painless JavaScript Testing

Jest 是一款 Facebook 开源的 JS 单元测试框架,目前 Jest 已经在 Facebook 开源的 React, React Native 等前端项目中被做为标配测试框架。

Jest 是 Facebook 开发的测试框架。它的目标之一是通过现成可用的工具提供“零配置”体验。它已经存在了一段时间,并且快速可靠。

Jest功能:

  • 内置Jasmin语法
  • 内置auto mock
  • 自带mock API
  • 前端友好(集成JSDOM)
  • 支持直接使用Promise和async/await书写异步代码
  • 支持对 React 组件进行快照监控
  • 扩展和集成 Babel 等常用工具集也很方便
  • 自动环境隔离
npm install --save-dev jest

Jest用法

安装:

npm install --save-dev jest

package.json中添加:

{
  "scripts": {
    "test": "jest"
  }
}

运行 npm test

也可通过命令行运行:
jest my-test --notify --config=config.json

附加配置

npm install --save-dev babel-jest regenerator-runtime

项目根目录添加.babelrc文件

{
  "presets": ["es2015", "react"]
}

Jest自动定义 NODE_ENV = test

别忘了把它添加到 npm 脚本中。

测试脚本的写法

下面是一个加法模块add.js 的代码。

// add.js
function add(x, y) {
  return x + y;
}

module.exports = add;

要测试这个加法模块是否正确,就要写测试脚本。
通常,测试脚本与所要测试的源码脚本同名,但是后缀名为.test.js
(表示测试)或者.spec.js
(表示规格)。比如,add.js
的测试脚本名字就是add.test.js

import add from '../src/add'
describe('加法函数测试', () => {
    it('1加2应该等于3', () => {
        expect(add(1, 2)).toBe(3);
    });
});
  • 测试脚本里面应该包括一个或多个describe块,每个describe块应该包括一个或多个it块。

  • describe块称为"测试套件"(test suite),表示一组相关的测试。它是一个函数,第一个参数是测试套件的名称("加法函数的测试"),第二个参数是一个实际执行的函数。

  • it块称为"测试用例"(test case),表示一个单独的测试,是测试的最小单位。它也是一个函数,第一个参数是测试用例的名称("1 加 1 应该等于 2"),第二个参数是一个实际执行的函数。

package.json

断言库的用法

  expect(add(1, 2)).toBe(3);

所谓"断言",就是判断源码的实际执行结果与预期结果是否一致,如果不一致就抛出一个错误。上面这句断言的意思是,调用add(1, 1),结果应该等于2。

所有的测试用例(it块)都应该含有一句或多句的断言。它是编写测试用例的关键。断言功能由断言库来实现

"scripts": { "test": "jest"}

简单测试

// add.js
function add(a, b) {
    return a + b;
}
module.exports = add;

// add.test.js
import add from '../src/add'
describe('加法函数测试', () => {
    it('1加2应该等于3', () => {
        expect(add(1, 2)).toBe(3);
    });
});

为了简单起见,我在这里将 Jest 与简单的纯 Node.js 模块一起使用(不包括 webpack)。稍后我们将学习如何在 React 中使用 Jest

异步的单元测试

// user.js
import request from './request';
export function getUserName(userID) {
  return request('/users/' + userID).then(user => user.name);
}

// user.test.js

import  * as user from 'user';
// 普通回调
it('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    done();
  }
  fetchData(callback);
});

// 方法需要返回一个promise对象
it('works with promises',() => {
  return user.getUserName(5)
      .then(name => expect(name).toEqual('Paul'));
});

// async/await
it('works with async/await', async () => {
  const userName = await user.getUserName(4);
  expect(userName).toEqual('Mark');
})

首先,让我们创建一些可以测试的简单函数。

React组件的单元测试

// CheckboxWidthLabel.js
import React from 'react';

export default class CheckboxWithLabel extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isChecked: false };
        this.onChange = this.onChange.bind(this);
    }

    onChange() {
        this.setState({ isChecked: !this.state.isChecked });
    }

    render() {
        return (
            <label >
                <input 
                type = "checkbox"
                checked = { this.state.isChecked }
                onChange = { this.onChange }
                /> 
                { this.state.isChecked ? this.props.labelOn : this.props.labelOff }
            </label >
        )
    }
}

//CheckboxWithLabel-test.js

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import CheckboxWidthLabel from 'CheckboxWithLabel';

it('CheckboxWithlabel changes the text after click', () => {
    const checkbox = TestUtils.renderIntoDocument( <
        CheckboxWidthLabel labelOn = "On"
        labelOff = "Off" / >
    );
    const checkboxNode = ReactDOM.findDOMNode(checkbox);
    expect(checkboxNode.textContent).toEqual('Off');
    TestUtils.Simulate.change(
        TestUtils.findRenderedDOMComponentWithTag(checkbox, 'input')
    )
    expect(checkboxNode.textContent).toEqual('On');
})

divide.js

手动mock

图片 1

Paste_Image.png

__ _ _ mocks __ _ _/fetch.js

const actions = {
  "GetAnnounce":{data:["公告公告公告","公告2公告2公告2"]}
}
export default function fetch(params){
  return new Promise((resolve, reject) => {
    const actionType = arams.url.substr('/common/'.length)
    const res = actions[actionType];
      process.nextTick(
        () => res ? resolve(res) : reject({
          error: 'action with ' + actionType + ' not found.',
        })
      );
  })
}

fetch.js

import fetch from './fetch'
export function fetchNotice(params){
  return fetch({
    url:'/common/GetAnnounce',
    params:params|{}
  }).then(annouce => annouce)
}
export function getAllNotice(params){
  return params || {}
}

annouce.js

import fetch from './fetch'
export function fetchNotice(params){
  return fetch({
    url:'/common/GetAnnounce',
    params:params|{}
  }).then(annouce => annouce)
}
export function getAllNotice(params){
  return params || {}
}

annouce.test.js

jest.mock('services/fetch')
import {fetchNotice} from 'services/annouce'

describe('annouce',() => {
  describe('获取公告列表', () => {
      it('正确返回公告数组',  () => {
        // expect([1,2]).toEqual([1,2])
      return fetchNotice().then(res => expect(res.data).toHaveLength(2)).catch(err => console.log(err))
      });
      it('正确返回公告数组',  () => {
        // expect([1,2]).toEqual([1,2])
      return fetchNotice().then(res => expect(res.data).toBeTruthy())
      });
      it('正确返回公告数组',  () => {
        // expect([1,2]).toEqual([1,2])
      return fetchNotice().then(res => expect(res.data).toContain('公告公告公告'))
      });
  })
})

注意:

  1. ___mocks____文件夹要和要mock的方法放在同一级目录。

2.如果mock的是nodejs方法,____ mocks ____文件夹要放在项目根目录。

function divide(a, b) { return a / b;}module.exports = divide;

Jest用正则表达式确定要测试的文件默认情况下,如果它们位于tests目录中或以test.spec为后缀,将执行.js.jsx文件。你可以在项目的package.json文件中用testRegex属性指定。

本文由10bet发布于Web前端,转载请注明出处:自动化测试之前端js单元测试框架jest

关键词:

频道精选

最火资讯