React測試庫入門

您可能在想：另一個React 測試庫？ CSS-Tricks 上已經介紹了這麼多（事實上，我已經發布了一個關於Jest 和Enzyme 的文章），難道選項還不夠多嗎？

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

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

它嘗試針對用戶如何使用您的應用程序進行測試。事實上，它的實現方式使得即使您重構組件，測試也不會中斷。我知道我們在React 之旅的某個時刻都遇到過這種情況。

我們將一起花一些時間，使用react-testing-library 為我構建的一個簡單的待辦事項應用程序編寫測試。您可以本地克隆倉庫：

 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 在這裡，我們使用它進行斷言。在src 目錄內創建一個名為__test__的文件夾，並創建一個名為App.test.js的新文件。

拍攝快照

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

當我們第一次運行此測試時，我們會拍攝組件外觀的第一個快照。因此，第一次測試一定會通過，因為沒有其他快照可以與之比較來表明某些內容失敗了。只有當我們通過添加新元素、類、組件或文本對組件進行新的更改時，它才會失敗。添加快照創建時或上次更新時不存在的內容。

快照測試將是我們在這裡編寫的第一個測試。讓我們打開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();
});

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

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

讓我們運行測試看看會發生什麼：

 ## yarn
yarn test

## npm
npm test

正如我們現在所知，如果這是我們的第一個測試，則會在__tests__目錄內名為__snapshots__的新文件夾中創建一個組件快照。我們實際上會在其中獲得一個名為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>
`;

現在，讓我們測試DOM 元素和事件

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

 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。然後我們設置todoList來定位todos-ul元素。這應該返回2。

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

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

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

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

嗯，咖啡。 ☕️

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

 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 ，我能夠提取應用程序中的測試ID。然後我創建一個變量，將其設置為字符串“Learn React”，並使其成為輸入字段的值。接下來，我使用其測試ID 獲取輸入字段，並在設置輸入字段的值後觸發更改事件。完成此操作後，我斷言輸入字段的值確實是“Learn React”。

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

接下來，讓我們測試我們能否添加新的待辦事項。我們將需要獲取輸入字段、添加新項目的按鈕和無序列表，因為這些都是創建新項目所需的所有元素。

我們為輸入字段設置一個值，然後觸發按鈕點擊以添加任務。我們可以通過使用getByText獲取按鈕來做到這一點——通過對文本為“Add Task”的DOM 元素觸發點擊事件，我們應該能夠添加一個新的待辦事項。

讓我們斷言無序列表元素中子元素（列表項）的數量等於3。這假設默認任務仍然完好無損。

 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); 
});

非常不錯，對吧？

這只是在React 中進行測試的一種方法

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

也就是說，這只是React 的一個測試資源。當然還有其他資源，但希望您現在已經看到了一些內容，並且有興趣嘗試一下，當然也要使用最適合您項目的資源。

以上是React測試庫入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！