初心者のための反応テスト

今日、我々は開発の最も過小評価された部分の1つについて話します.私たちは皆、テストは本当に重要であり、適切にテストされたソフトウェア製品は信頼性、セキュリティ、およびパフォーマンスを保証し、それは時間節約、コスト効率、顧客満足につながる.しかし、なぜそれが挑戦的ではないにもかかわらず、我々はテストを過小評価するのですか?
「退屈だから!」
本当だ.誰も他の選手が行うようにフィールド上のボールとダンスの代わりにゴールキーパーになりたい.しかし、あなたは不完全なプロジェクトを無駄にすることができますどのくらいの時間を認識する必要があります.あなたは、製品を完了したと思うが、それはあなたに戻って何度も戻ってくる.あなたは部品をチェックしなければならない.そして、テストがなければ、それが正しく動作している場合は、決して知りません.それが十分に圧倒的に聞こえるならば、始めましょう、そして、我々が我々の反応アプリケーションをテストする方法を見ましょう.
より良い理解のためには、チュートリアルのビデオバージョンを見ることができます.初心者にとってより役に立つでしょう.はい、
読書はよい?続けましょう.
まず、DOM要素に到達し、それらと対話するテストライブラリを必要とし、テスト結果を実際の結果と比較できるテストフレームワークを必要とします.このチュートリアルでは、@ test - test/responseとjestを使用します.あなたが作成反応アプリを使用している場合は、何もインストールする必要はありません、アプリケーションはすでに含まれています.Create Reaction Appを使用しない場合は、次の行を実行します.npm install --save-dev @testing-library/react jest理解しようとしましょう.それを行うには、アプリケーションでいくつかのHTML要素を追加します.js

function App() {

  const a = 2
  const b = 4

  return (
    <div className="app">      
      <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
      </ul>

      <h1 data-testid= "title">Hello</h1>
      <span title="sum">{a+b}</span>
    </div>
  );
}

export default App;

我々の目標はテストです.

果物リストが3つのアイテムを含むかどうか、

H 1タグが存在するかどうか、

スパン5650が変数AおよびBの和を含んでいるかどうか、

B .

アプリを開きましょう.テスト.JSファイルとテストを開始します.

テスト1

我々がする必要がある最初のことは、新しいテストを作成し、説明を与えることです.

test('should render 3 list items', () => {

});

オッキー.我々の目標を述べた.そして今、私たちはリスト項目を選択するためにDOM要素に到達するべきです.そのためには、テストライブラリのRenderメソッドを使用し、コンポーネントをレンダリングします.

import { render } from '@testing-library/react';
import App from './App';

test('should render 3 list items', () => {
  render(<App />);
});

現在、我々は彼らの長さをチェックするためにリストアイテムを選ぶ準備ができています.DOM要素を選択するにはReact testing library queriesを使用します.あなたはそれを行う多くのオプションがあります.role based queryを使いましょう.

import { render, screen } from '@testing-library/react';
import App from './App';

test('should render 3 list items', () => {
  render(<App />);
  const listitems = screen.getAllByRole("listitem");
});

** 1つ以上のlistitemを持っているので、getByを使用しません.
** screenオブジェクトは、レンダリングされたコンポーネント内のHTMLドキュメント全体を表します.
最終的に、我々は結果をJestを使用して比較することができます.そのために、我々は期待を書きます.

import { render, screen } from '@testing-library/react';
import App from './App';

test('should render 3 list items', () => {
  render(<App />);
  const listitems = screen.getAllByRole("listitem");
  expect(listitems).toHaveLength(3);
});

**テストを書いているときは、その値を特定の条件に合致させるのをチェックする必要があります.期待すると、別のものを検証できるように“matchers”の数にアクセスできます.すべてのgetAllByの方法を見るために、you can check here.
および.以上です.テスト結果を確認しましょう.expectそして、あなたが理解するように、テストは通過します.おめでとう.今、あなたはリストの項目番号を変更することができますし、どのように失敗を参照してください.

テスト2

このテストでは、H 1タグが存在するかどうかをチェックします.H 1アイテムを選択するには別のクエリを使用します.npm run test今回はH 1タグを識別するテストIDを使用します.それを使用してアイテムを選択し、その存在を確認してみましょう.

import { render, screen } from '@testing-library/react';
import App from './App';

test('title should be rendered', () => {
  render(<App />);
  const title = screen.getByTestId("title");
  expect(title).toBeInTheDocument();
});

それは簡単です.

テスト3

最後のテストでは変数の合計をチェックします.<h1 data-testid= "title">Hello</h1>a = 2そして、6を期待しています.別のテストライブラリクエリを表示します.b = 4ご覧の通り、<span title="sum">{a+b}</span>である別の識別子を使用しています.それを使用して項目を選択し、合計数を確認します.

import { render, screen } from '@testing-library/react';
import App from './App';

test('sum should be 6', () => {
  render(<App />);
  const sum = screen.getByTitle("sum");
  expect(sum.textContent).toBe("6")
});

そして今、3つの成功したテストがあります.もちろん、他の期待メソッドを使用できます.それは本当に柔軟です.別の方法を試してみましょう.

import { render, screen } from '@testing-library/react';
import App from './App';

test('sum should be 6', () => {
  render(<App />);
  const sum = screen.getByTitle("sum");
  expect(sum).toHaveTextContent("6")
});

それは、我々に同じ結果を与えます.JESTドキュメントで別の選択肢を試すこともできます.
より高度な概念を学びたいなら、私のReact testing crash course videoを確実にチェックしてください.
それが役に立つことを願っています.読んでくれてありがとう
✨
🔥
⚡️ Lama Dev Facebook