【备忘录】比较React的单元测试库

2 年 ago
雅, 悟
2 minutes

首先

这篇文章是关于选择React单元测试库时进行调查并记录的备忘录。

比较React的单元测试库

目标

为了检测由于添加功能或修改等引起的意外故障，需要对React组件进行单元测试。

重要的文件或事项

    • TypeScript に対応していること。

 

    React コンポーネントのテストができること。

结论是什么？

Jest和React Testing Library看起来不错。

调查

只需要一个选项的话，以下是”前提”的中文本地化释义：

– 前提条件

当在React的单元测试中搜索时，常常会出现以下有关库的文章。

    • Jest

 

    • React Testing Library

 

    Enzyme

无论哪个，都支持TypeScript。

Jest 是什么？

    • オールインワン / ゼロコンフィグな JavaScript テスティングフレームワークのこと。

 

    • React というよりも、JavaScript をテストするためのフレームワークである。

 

    • Jest を導入するだけで以下の機能が使えるようになる。

 

    • 例として記載しているものは、その機能を単体で利用するために用いられるライブラリの一例である。

テストランナー（例 mocha, jasmine）
アサーション（例 chai, jasmine）
モック（例 sinon, testdouble）
カバレッジ（例 istanbul）

“Enzyme 的意思是什么？”

React でのユニットテストを助けてくれるテストユーティリティツールのこと。
元々 Airbnb が開発していた。
Enzyme は TDD(Test-Driven Development) で求められるようなロジックのテストに向いている。
Shallow Rendering という、親子コンポーネントを無視した特定コンポーネントだけのレンダリングができ、テストが書きやすい。
Airbnb によって開発されていたが、今は enzymejs という組織に所有権を譲渡している。
AirbnbはEnzyme への貢献を続けることを表明しているが、組織内での React Testing Library の使用が増加しているらしい。

React Testing Library 是什么

    • Enzyme と同様に、UI コンポーネントのユニットテストを助けてくれるテストユーティリティツールである。

 

    • Reactだけでなく、Vue や Angular, Svelte といった他のフロントエンドフレームワークや、Cypress や TestCafe といった E2E テストツールとも組み合わせて利用することができる。

 

    React Testing Library は BDD(Behavior-Driven Development) で求められるような、ユーザーの行動を元にしたテストに向いている。

从React公式文档中提取

    • React は Jest と React Testing Library を推奨ツールとしている。

 

    元々、React は EnzymeとReact Testing Library の両方について言及していたらしいが、現在は Enzyme についての記述はない。

从NPM上方

    npm trends のダウンロード数を比較すると、2020/09 ごろに React Testing Library が優勢になっている
image.png

对测试代码进行比较

酶。

    • Enzyme は React のメジャーバージョンごとに、enzyme-adapter-react-**というライブラリを提供しており、テストを行う際にはその設定を行う必要がある。(L. 7)

 

    2022年12月現在、React17 に対応したアダプターはまだリリースされていない。
import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { shallow } from "enzyme";
import App from "../src/App";
import { configure } from "enzyme";

configure({ adapter: new Adapter() });

describe("Hello enzyme", () => {
  test("have title", () => {
    const wrapper = shallow(<App />);
    expect(wrapper.text().includes('Hello CodeSandbox')).toBe(true);
  });
});

React Testing Library – 反应测试库

    メソッド名もわかりやすく、TestCafe に近いものを感じる。
import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import App from "../src/App";

test("loads and displays greeting", async () => {
  render(<App />);
  expect(screen.getByText("Hello CodeSandbox")).toBeInTheDocument();
});

感受

    • 公式が推しているので Jest と React Testing Library の組み合わせが有力そう。

 

    • Enzyme の Shallow Rendering は魅力的だが、Jest のモックで代用できるので必須ではない。

 

    • ユーザーの行動を元にしたテストのほうが、よりわかりやすく意味のあるテストが書けるので、テストが書きやすいと考えられる。

 

    • コンポーネントのロジックをテストする際は、Jest で十分だと思われる。

 

    • 例) 表示位置の座標計算、バリデーション、etc…

 

    • Vue などの他のフロントエンドフレームワークに移った際や、E2E を書く際にも利用できるのは大きなメリットであると思う。

 

    Airbnb が React Testing Library に流れていることからも、将来性は React Testing Library の方がありそう。

最后

这篇文章是备忘录式的，希望能对任何人有所帮助就好了。
如果发现错误，或有更易理解的建议，
欢迎在评论中留言，我会非常高兴的。

bannerAds