单元测试

对方法进行 wrap

'should call method once with argument': function () {
  var object = { method: function () {} };
  var spy = sinon.spy(object, 'method');

  object.method(1);

  assert(spy.withArgs(1).calledOnce);
}

测试 effects

import { expect } from 'chai';
import { runSaga, effects } from 'dva/saga';

describe('Account Manage', function() {
  describe('info', function() {
    const {
      state,
      effects: {
        edit
      }
    } = require('../src/account/models/info');

    it('should dispatch saveInfo action when editing', async function() {
      const dispatched = [];
      const payload = { username: 'name' };
      const result = await runSaga({
        dispatch: (action) => dispatched.push(action),
        getState: () => state
      }, edit, { payload }, effects).done;

      expect(dispatched).to.have.lengthOf(1);
      expect(dispatched[0]).to.have.property('type', 'saveInfo');
    });
  });
});

组件测试

• shallow，只渲染当前层组件，子组件不会被渲染，其会调用部分周期方法，不会实际地渲染节点，适用于只测试当前组件的输入输出
• mount，渲染高阶组件，包含整个组件树，这需要 DOM APIs（至少看起来像，如 jsdom 环境）
• static，静态渲染组件，输出 HTML 并使用文档树解析工具 Cheerio 包裹

import { expect } from 'chai';
import React from 'react';
import { mount } from 'enzyme';
import { effects } from 'dva/saga';

const { put } = effects;

describe('Banner', function() {
  const Banner = require('../src/components/Banner');

  it('should render correctly', async function() {
    const wrapper = mount(<Banner dispatch={put}/>);
    // wait async request
    await new Promise((resolve) => setTimeout(resolve, 2000));

    expect(wrapper.state('bannerData')).to.have.lengthOf.at.least(1);
    expect(wrapper.find('.slick-list')).to.have.lengthOf.above(1);
  });
});

集成测试

编写第一个 React 集成测试中的例子

git clone git@github.com:montezume/calculator.git

import React from "react";
import userEvent from "@testing-library/user-event";
import { render, screen } from "@testing-library/react";
import App from "./App";

describe("negative numbers", () => {
  describe("when we add -5 to 2", () => {
    it("equals -3", () => {
      render(<App />);
      userEvent.click(screen.getByRole("button", { name: "5" }));
      userEvent.click(screen.getByRole("button", { name: "+/-" }));
      userEvent.click(screen.getByRole("button", { name: "+" }));
      userEvent.click(screen.getByRole("button", { name: "2" }));
      userEvent.click(screen.getByRole("button", { name: "=" }));

      expect(screen.getByText("-3")).toBeInTheDocument();

      // clear the screen
      userEvent.click(screen.getByRole("button", { name: "AC" }));

      expect(screen.queryByText("-3")).not.toBeInTheDocument();
    });
  });
});

E2E 测试

/ launch server
import ready from '../../server';
import { expect } from 'chai';
import puppeteer from 'puppeteer';

describe('Account', function() {
  // set a long timeout
  this.timeout(60000);

  describe('log in', function() {
    it('should log in correctly', async function() {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();

      // wait dev server ready
      await ready();
      await page.goto('http://localhost:8000/account/login', { 'waitUntil': 'networkidle0' });
	    await page.type('#username', 'smalldragonluo');
	    await page.type('#password', 'pwd');
	    await page.click('#submit');
			// ...
      const result = await page.$eval('#result', (element) => {
        return element.innerHTML
      })
      expect(result).to.equal('Success!');
      
      await browser.close();
    });
  });
});