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

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

您的測(cè)試越能模擬軟件的使用方式，它們就能給您帶來(lái)越大的信心。

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

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

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

如果您這樣做，接下來(lái)安裝所需的包：

## 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 的新文件。

拍攝快照

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

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

快照測(cè)試將是我們?cè)谶@里編寫(xiě)的第一個(gè)測(cè)試。讓我們打開(kāi) 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)入了我們用于編寫(xiě)和運(yùn)行測(cè)試的必要包。render 用于顯示我們要測(cè)試的組件。我們使用 cleanup 在每次測(cè)試運(yùn)行后清除內(nèi)容——正如您在 afterEach(cleanup) 行中看到的那樣。

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

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

## yarn
yarn test

## npm
npm test

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

// 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)在，讓我們測(cè)試 DOM 元素和事件

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

我們?cè)谠摯a段中使用 getByTestId 從 App 組件中提取測(cè)試 ID。然后我們?cè)O(shè)置 todoList 來(lái)定位 todos-ul 元素。這應(yīng)該返回 2。

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

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

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

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

嗯，咖啡。??

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

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)用程序中的測(cè)試 ID。然后我創(chuàng)建一個(gè)變量，將其設(shè)置為字符串“Learn React”，并使其成為輸入字段的值。接下來(lái)，我使用其測(cè)試 ID 獲取輸入字段，并在設(shè)置輸入字段的值后觸發(fā)更改事件。完成此操作后，我斷言輸入字段的值確實(shí)是“Learn React”。

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

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

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

讓我們斷言無(wú)序列表元素中子元素（列表項(xiàng)）的數(shù)量等于 3。這假設(shè)默認(rèn)任務(wù)仍然完好無(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ò)，對(duì)吧？

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

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

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

以上是React測(cè)試庫(kù)入門(mén)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！