您可能在想：另一個(gè)React 測試庫？ CSS-Tricks 上已經(jīng)介紹了這麼多（事實(shí)上，我已經(jīng)發(fā)布了一個(gè)關(guān)於Jest 和Enzyme 的文章），難道選項(xiàng)還不夠多嗎？

但是，react-testing-library 不僅僅是另一個(gè)測試庫。它是一個(gè)測試庫，是的，但它構(gòu)建於一個(gè)根本原則之上，這使它與其他測試庫區(qū)別開來。

您的測試越能模擬軟件的使用方式，它們就能給您帶來越大的信心。

它嘗試針對用戶如何使用您的應(yīng)用程序進(jìn)行測試。事實(shí)上，它的實(shí)現(xiàn)方式使得即使您重構(gòu)組件，測試也不會(huì)中斷。我知道我們在React 之旅的某個(gè)時(shí)刻都遇到過這種情況。

我們將一起花一些時(shí)間，使用react-testing-library 為我構(gòu)建的一個(gè)簡單的待辦事項(xiàng)應(yīng)用程序編寫測試。您可以本地克隆倉庫：

 git clone https://github.com/kinsomicrote/todoapp-test.git

如果您這樣做，接下來安裝所需的包：

 ## yarn
yarn add --dev react-testing-library jest-dom

## npm
npm install --save-dev react-testing-library jest-dom

如果您想知道為什麼Jest 在這裡，我們使用它進(jìn)行斷言。在src 目錄內(nèi)創(chuàng)建一個(gè)名為__test__的文件夾，並創(chuàng)建一個(gè)名為App.test.js的新文件。

拍攝快照

快照測試會(huì)記錄對已測試組件執(zhí)行的測試，作為一種直觀查看更改之間差異的方式。

當(dāng)我們第一次運(yùn)行此測試時(shí)，我們會(huì)拍攝組件外觀的第一個(gè)快照。因此，第一次測試一定會(huì)通過，因?yàn)闆]有其他快照可以與之比較來表明某些內(nèi)容失敗了。只有當(dāng)我們通過添加新元素、類、組件或文本對組件進(jìn)行新的更改時(shí)，它才會(huì)失敗。添加快照創(chuàng)建時(shí)或上次更新時(shí)不存在的內(nèi)容。

快照測試將是我們在這裡編寫的第一個(gè)測試。讓我們打開App.test.js文件並使其如下所示：

 import React from 'react';
import { render, cleanup } from "react-testing-library";
import "jest-dom/extend-expect";
import App from './App';

afterEach(cleanup);

it("matches snapshot", () => {
  const { asFragment } = render(<app></app> );
  expect(asFragment()).toMatchSnapshot();
});

這導(dǎo)入了我們用於編寫和運(yùn)行測試的必要包。 render用於顯示我們要測試的組件。我們使用cleanup在每次測試運(yùn)行後清除內(nèi)容——正如您在afterEach(cleanup)行中看到的那樣。

使用asFragment ，我們獲得渲染組件的DocumentFragment 。然後我們期望它與已創(chuàng)建的快照匹配。

讓我們運(yùn)行測試看看會(huì)發(fā)生什麼：

 ## yarn
yarn test

## npm
npm test

正如我們現(xiàn)在所知，如果這是我們的第一個(gè)測試，則會(huì)在__tests__目錄內(nèi)名為__snapshots__的新文件夾中創(chuàng)建一個(gè)組件快照。我們實(shí)際上會(huì)在其中獲得一個(gè)名為App.test.js.snap的文件，它看起來像這樣：

 // Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`matches snapshot 1`] = `
<documentfragment><div>
    <div>
      <div>
        <h2>
          Add Todo
        </h2>
      </div>
    </div>

      <div>
        <div>
          </div>
      </div>
      <div>
        <div>

            Add Task

        </div>
      </div>

    <div>
      <div>
        <h3>
          Lists
        </h3>
        <ul data-test="">
<li>
            <div>
              Buy Milk

                X

            </div>
          </li>
          <li>
            <div>
              Write tutorial

                X

            </div>
          </li>
        </ul>
</div>
    </div>
  </div>
</documentfragment>
`;

現(xiàn)在，讓我們測試DOM 元素和事件

我們的應(yīng)用程序包含兩個(gè)默認(rèn)情況下在應(yīng)用程序第一次運(yùn)行時(shí)顯示的待辦事項(xiàng)。我們想確保它們確實(shí)在第一次應(yīng)用程序運(yùn)行時(shí)顯示，因此，為了測試這一點(diǎn)，我們必須定位無序列表（<ul></ul> ）並檢查長度。我們期望長度等於2——項(xiàng)目數(shù)。

 it('it displays default todo items', () => {
  const { getByTestId } = render(<app></app> );
  const todoList = getByTestId('todos-ul');
  expect(todoList.children.length).toBe(2);  
});

我們在該代碼段中使用getByTestId從App組件中提取測試ID。然後我們設(shè)置todoList來定位todos-ul元素。這應(yīng)該返回2。

使用我們到目前為止學(xué)到的知識(shí)，看看您能否編寫一個(gè)測試來斷言用戶可以在輸入字段中輸入值。以下是您需要執(zhí)行的操作：

• 獲取輸入字段
• 為輸入字段設(shè)置值
• 觸發(fā)更改事件
• 斷言輸入字段的值與您在步驟2 中為其設(shè)置的值相同

不要偷看我下面的答案！花盡可能多的時(shí)間。

還在繼續(xù)嗎？太棒了！我去喝杯咖啡，馬上回來。

嗯，咖啡。 ??

哦，你完成了！你真棒。讓我們比較答案。我的看起來像這樣：

 it('allows input', () => {
  const { getByTestId, fireEvent } = render(<app></app> );
  let item = 'Learn React';
  const todoInputElement = getByTestId('todo-input');
  todoInputElement.value = item;
  fireEvent.change(todoInputElement);
  expect(todoInputElement.value).toBe('Learn React');
});

使用getByTestId ，我能夠提取應(yīng)用程序中的測試ID。然後我創(chuàng)建一個(gè)變量，將其設(shè)置為字符串“Learn React”，並使其成為輸入字段的值。接下來，我使用其測試ID 獲取輸入字段，並在設(shè)置輸入字段的值後觸發(fā)更改事件。完成此操作後，我斷言輸入字段的值確實(shí)是“Learn React”。

這與您的答案一致嗎？如果您有其他方法，請留下評(píng)論！

接下來，讓我們測試我們能否添加新的待辦事項(xiàng)。我們將需要獲取輸入字段、添加新項(xiàng)目的按鈕和無序列表，因?yàn)檫@些都是創(chuàng)建新項(xiàng)目所需的所有元素。

我們?yōu)檩斎胱侄卧O(shè)置一個(gè)值，然後觸發(fā)按鈕點(diǎn)擊以添加任務(wù)。我們可以通過使用getByText獲取按鈕來做到這一點(diǎn)——通過對文本為“Add Task”的DOM 元素觸發(fā)點(diǎn)擊事件，我們應(yīng)該能夠添加一個(gè)新的待辦事項(xiàng)。

讓我們斷言無序列表元素中子元素（列表項(xiàng)）的數(shù)量等於3。這假設(shè)默認(rèn)任務(wù)仍然完好無損。

 it('adds a new todo item', () => {
  const { getByText, getByTestId, fireEvent } = render(<app></app> );
  const todoInputElement = getByTestId('todo-input');
  const todoList = getByTestId('todos-ul');
  todoInputElement.value = 'Learn React';
  fireEvent.change(todoInputElement);
  fireEvent.click(getByText('Add Task'));
  expect(todoList.children.length).toBe(3); 
});

非常不錯(cuò)，對吧？

這只是在React 中進(jìn)行測試的一種方法

您可以在下一個(gè)React 應(yīng)用程序中嘗試react-testing-library。倉庫中的文檔非常詳盡，並且——與大多數(shù)工具一樣——是最佳的起點(diǎn)。 Kent C. Dodds 構(gòu)建了它，並且在Frontend Masters（需要訂閱）上有一個(gè)關(guān)於測試的完整課程，該課程還涵蓋了react-testing-library 的來龍去脈。

也就是說，這只是React 的一個(gè)測試資源。當(dāng)然還有其他資源，但希望您現(xiàn)在已經(jīng)看到了一些內(nèi)容，並且有興趣嘗試一下，當(dāng)然也要使用最適合您項(xiàng)目的資源。

以上是React測試庫入門的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！