ant design pro （十二）advanced UI 測試

1、概述

原文地址：https://pro.ant.design/docs/ui-test-cn

UI 測試是項目研發流程中的重要一環，有效的測試用例能夠梳理業務需求，保證研發的質量和進度，讓工程師能夠放心的重構代碼和新增功能。

Ant Design Pro 封裝了一套簡潔易用的 React 單元測試和 E2E 測試方案，在項目根目錄運行如下命令就能運行測試用例。

npm run test:all  # 執行全部測試

2、詳細

2.一、單元測試

單元測試用於測試 React UI 組件的表現。咱們參考了 create-react-app，使用 jest 做爲測試框架。

jest 是一個 node 端運行的測試框架，使用了 jsdom 來模擬 DOM 環境，適合用於快速測試 React 組件的邏輯表現，須要真實瀏覽器能夠參考 E2E 測試部分。

2.1.一、寫一個用例

好比，咱們能夠建一個文件 src/routes/Result/Success.test.js 來測試成功頁面組件的 UI 表現。

import React from 'react';
import { shallow } from 'enzyme';
import Success from './Success';   // 引入對應的 React 組件

it('renders with Result', () => {
  const wrapper = shallow(<Success />);                           // 進行渲染
  expect(wrapper.find('Result').length).toBe(1);                  // 有 Result 組件
  expect(wrapper.find('Result').prop('type')).toBe('success');    // Result 組件的類型是成功
});

這裏使用了 enzyme 做爲測試庫，它提供了大量實用的 API 來幫助咱們測試 React 組件。斷言部分沿用了 jest 默認的 jasmine2 expect 語法。

2.1.二、本地執行

使用如下的命令將統一搜索和執行 src 下 *.test.js 格式的用例文件。 

npm test .test.js

執行單個或一組用例

npm test src/routes/Result/Success.test.js  # 測試 Success.test.js
npm test src/routes                         # 測試 routes 下的全部用例文件

2.1.三、測試 dva 包裝組件

被 dva connect 的 React 組件可使用下面方式進行測試。

import React from 'react';
import { shallow } from 'enzyme';
import Dashboard from './Dashboard';

it('renders Dashboard', () => {
  // 使用包裝後的組件
  const wrapper = shallow(
    <Dashboard.WrappedComponent user={{ list: [] }} />
  );
  expect(wrapper.find('Table').props().dataSource).toEqual([]);
});

2.二、e2e 測試

端到端測試也叫冒煙測試，用於測試真實瀏覽器環境下前端應用的流程和表現，至關於代替人工去操做應用。

咱們引入了 puppeteer 做爲 E2E 測試的工具，puppeteer 是 Google Chrome 團隊官方的無界面（Headless）Chrome 工具。它默認使用 chrome / chromium 做爲瀏覽器環境運行你的應用，而且提供了很是語義化的 API 來描述業務邏輯。

2.2.一、寫一個 e2e 用例

假設有一個需求，用戶在登陸頁面輸入錯誤的用戶名和密碼，點擊登陸後，出現錯誤提示框。

咱們寫一個用例來保障這個流程。在 src/e2e/ 目錄下建一個 Login.e2e.js 文件，按上述業務需求描述測試用例。 

import puppeteer from 'puppeteer';

describe('Login', () => {
  it('should login with failure', async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.type('#userName', 'mockuser');
    await page.type('#password', 'wrong_password');
    await page.click('button[type="submit"]');
    await page.waitForSelector('.ant-alert-error'); // should display error
    await page.close();
    browser.close();
  });
});

更多 puppeteer 的方法能夠參考 puppeteer/docs/api.md。

2.2.二、運行用例

運行下列命令將執行 src 下全部的 *.e2e.js 用例文件。 

npm test .e2e.js

注意，本地測試 e2e 用例須要啓動 npm start，不然會報 Failed: navigation error 的錯誤。

2.三、watch 模式

npm test -- --watch

添加 --watch 配置能夠進入 watch 模式，當你修改和保存文件時，Jest 會自動執行相應用例。Jest 的命令行工具也提供了各類方便的快捷鍵來執行你須要的用例。

2.四、測試覆蓋率

npm test -- --coverage

添加 --coverage 配置能夠顯示項目的測試覆蓋率。

2.五、聚焦和忽略用例

使用 xit() 取代 it() 能夠暫時忽略用例，fit() 能夠聚焦當前用例並忽略其餘全部用例。這兩個方法能夠幫助你在開發過程當中只關注當前須要的用例。

2.六、接入集成測試服務

若是須要接入 travis、CircleCI、Gitlab CI 等集成測試環境，能夠參考本倉庫提供的 .travis.yml。

注意 e2e 測試須要集成環境支持 electron，若是不支持，你可使用 npm test .test.js 單獨運行單元測試。

2.七、參考連接

更多測試技巧和功能請參考如下連接。

• create-react-app tests

• jest

• enzyme

• puppeteer

• Using with puppeteer