JavaScript測試教程-part 2：引入 Enzyme 並測試 React 組件

時間 2019-11-15

標籤 javascript 測試教程引入 enzyme react 組件欄目 JavaScript 简体版

原文原文鏈接

做者：Marcin Wanago
翻譯：瘋狂的技術宅javascript

原文：https://wanago.io/2018/09/03/...前端

未經容許嚴禁轉載java

1. JavaScript測試教程-part 1：用 Jest 進行單元測試
1. JavaScript測試教程–part 2：引入 Enzyme 並測試 React 組件
1. JavaScript測試教程–part 3：測試 props，掛載函數和快照測試
1. JavaScript測試教程–part 4：模擬 API 調用和模擬 React 組件交互

在本教程的第一篇中，咱們簡要介紹了單元測試的基礎。此次要更進一步，使用 Enzyme 庫測試 React。這樣可使你的程序將更加可靠，而且更加容易避免迴歸。咱們在這裏用了 Jest，不過 Enzyme 也能夠與 Mocha 和 Chai 之類的庫一塊兒使用。react

Enzyme 基礎

Enzyme 是一個庫，用於在測試時處理你的 React 組件。它由 Airbnb 開發。git

設置 Enzyme

繼續上一篇文章的內容，假設你 Jest 已經可以工做了。若是尚未，請隨時查看課程的上一部分。下面開始安裝 Enzyme程序員

npm install enzyme

首先要建立一個 setupTests.js 文件。它將包含 adapter 的用法，後者是一個附加庫，容許你將 Enzyme 與一組特定的 React 版本一塊兒使用。我將使用 React 16.x，因此須要安裝 enzyme-adapter-react-16。有關兼容性列表，請查看 Enzyme repo。github

你還能夠找到 preact 和 inferno之類的庫的適配器

npm install enzyme-adapter-react-16

完成以後，setupTests.js 文件的內容應以下所示：面試

setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
 
configure({adapter: new Adapter()});

最後要作的是在 package.json 中提供此文件的路徑npm

package.json

"jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/app/setupTests.js"
}

準備就緒！json

淺渲染

Enzyme 庫的最基本用法是淺渲染。它容許你僅渲染父組件。「淺渲染」不但速度更快，並且很是適合單元測試。這樣，你就不比測試傳遞給 shallow 函數的其餘組件。

App.js

import React from 'react';
 
const App = () => {
  return <h1>Hello world!</h1>
}
 
export default App;

App.test.js

import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
 
describe('app component', () => {
  it('contains a header with the "Hello world!"', () => {
    const app = shallow(<App/>);
    expect(app.containsMatchingElement(<h1>Hello world!</h1>)).toEqual(true);
  });
});

在這個簡單測試中，咱們正在檢查 App 組件是否包含某個標頭。運行 npm run test 後，你會看到一條成功消息。

PASS  app/App.test.js
  app component
    ✓ contains a header with the "Hello world!"

這裏要注意一個很是重要的點：即便咱們用了 Enzyme，但測試運行程序仍然是 Jest。因爲咱們用的是 expect 函數，所以可使用各類可供調用的匹配器函數。我已經在課程的第一部分中提到了它們。相關列表，請訪問 Jest 文檔。

讓咱們建立一些更有趣的測試。先建立一個全新的組件。

ToDoList.js

import React from 'react';
 
const ToDoList = (props) => {
  return (
    <ul>
      {
        props.tasks.map((taskName, index) =>
          <li key={index}>{taskName}</li>
        )
      }
    </ul>
  )
};
 
export default ToDoList;

讓咱們測試一下，若是提供的任務列表爲空，將會發生什麼，若是包含任務，又會發生什麼。

ToDoList.test.js

import React from 'react';
import { shallow } from 'enzyme';
import ToDoList from './ToDoList';
 
describe('ToDoList component', () => {
  describe('when provided with an empty array of tasks', () => {
    it('contains an empty <ul> element', () => {
      const toDoList = shallow(<ToDoList tasks={[]}/>);
      expect(toDoList).toContainReact(<ul/>);
    })
    it('does not contain any <li> elements', () => {
      const toDoList = shallow(<ToDoList tasks={[]}/>);
      expect(toDoList.find('li').length).toEqual(0);
    })
  });
 
  describe('when provided with an array of tasks', () => {
    it('contains a matching number of <li> elements', () => {
      const tasks = ['Wash the dishes', 'Make the bed'];
      const toDoList = shallow(<ToDoList tasks={tasks}/>);
      expect(toDoList.find('li').length).toEqual(tasks.length);
    })
  });
});

測試順利經過，可是咱們應該解釋一些內容。

在第一個測試中，咱們使用了 toContainReact 函數，這是一個自定義匹配器函數。它是 enzyme-matchers 庫的一部分。要將其與 Jest 一塊兒使用，請安裝 jest-enzyme 包。

npm install jest-enzyme

最後要作的是將其導入 setupTests 文件中。

setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-enzyme';
 
configure({adapter: new Adapter()});

有關其提供的功能列表，請查看自述文件。你會發現它很是有用。

在第二個測試中，咱們在組件上調用了 find 函數。這要歸功於 shallow 函數返回 ShallowWrapper，它是渲染輸出的包裝器。它有一組可供調用的函數。要檢查函數列表，請轉到 Enzyme 文檔。

運行全部的測試會給咱們帶來成功的信息！

PASS  app/App.test.js
PASS  app/components/ToDoList/ToDoList.test.js
 
Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        1.41s
Ran all test suites.

總結

本文中咱們已經瞭解了使用 Enzyme 測試 React 組件的基本知識。咱們已經介紹了安裝 Enzyme 並運行第一個簡單測試。使用的渲染類型稱爲「淺渲染」。之因此這樣稱呼，是由於它不渲染任何子組件。在編寫單元測試時，它工做得很好。在本教程的後續部分中，我將介紹其餘類型的渲染，並學習如何測試程序的不一樣部分。它將包括快照測試和模擬數據之類的技術。下次見！