初心者のための反応におけるテスト駆動開発入門

テスト駆動開発(TDD)の最初の規則は、機能をコーディングする前にテストを書くことです.いくつかのバックエンド仕事をするとき、それはより直観的に聞こえます.🚀
本稿では、簡単な構成要素と反応してTDDを探索する.

特徴

この記事では、次のコンポーネントを再現します.シンプルでとても醜い🤧-- カウンター.

さて、それは私たちがここで理解したいことのために仕事をするでしょう.なぜなら、私たちは審美的なものよりも機能性に集中しているからです.💄

プロジェクトのセットアップ

まず第一に、シンプルな反応プロジェクトを作成します.

yarn create react-app react-test-driven-development

プロジェクトが作成されると、プロジェクトの実行によってすべてが動作することを確認します.

cd react-test-driven-development
yarn start

そして、あなたは何か似ているhttp://localhost:3000 .

カウンタ機能の書き込み

新しいディレクトリを作成するsrc ディレクトリcomponents . このディレクトリには、私たちが書いているコンポーネントが含まれます.そして新しいディレクトリの中にCounter.test.js . TDDを行うときに述べたように、機能をコーディングする前にテストを書きます.
それはあなたが本当にコードとテストに行くものについて考えることを余儀なくされているため、機能のためのより良いアーキテクチャを確立するのに役立ちます.

カウンタコンポーネントの説明

理想的なコンポーネントは、プロップと呼ばれるvalue . この値は、次に、画面上に表示されます
タグ.
すごい!まずテストを書きましょう.

テストを書く

インサイドCounter.test.js 次のコンテンツを追加します.

import { render, screen } from '@testing-library/react';
import Counter from "Counter";

テストを書くために必要なツールをインポートすることから始めます.2行目を心配しないでくださいCounter コンポーネント.TDDの目標は、テストが最初に機能を書き込む前に失敗することを確認することです.
これで、最初のテストを書くことができます.

test('renders counter component', () => {
    render(<Counter value={2} />);
    const counterElement = screen.getByTestId("counter-test");
});

ここでは、我々はレンダリングCounter DOM内のコンポーネントと、要素を取得します.ここでテストする2つのことがあります.

コンポーネントはレンダリングされますか?

カウンタは、値として正確に2を示していますか?

test('renders counter component', () => {
    render(<Counter value={2} />);
    const counterElement = screen.getByTestId("counter-test");

    // Testing that the counter element is rendered
    expect(counterElement).toBeInTheDocument();

    // Testing that the counter element has the correct value
    expect(counterElement).toHaveTextContent("2");
});

すごい!コマンドラインで、次のコマンドを実行してテストを実行します.

yarn test

コマンドは自然に失敗する.

すごい!コンポーネントを動かして、書きましょう.

コンポーネントの書き込み

コンポーネントディレクトリ内で、新しいファイルを作成しますCounter.jsx . このファイルの中に次のコンテンツを追加します.

import React from "react";


// This is the component we are testing

function Counter(props) {

    const { value } = props;
    return (
        <p data-testid="counter-test">
            {value}
        </p>
    );
}

export default Counter;

今テストを再度実行し、すべてが緑色にする必要があります.

いいねいいね私たちはすばらしい仕事をした.次の手順は、このコンポーネントをApp.js とabutton 状態変化を引き起こす.そして、我々もこれのためにTDDに行きます.

You may have an issue with a similar error in the terminal after running the tests.

    Warning: ReactDOM.render is no longer supported in React 18...

この答えをチェックStackOverflow 解決方法を確認するには

フルカウンタ機能を書く

この場合、我々は現在、値を変更するボタンを追加しているCounter.jsx . コードを直接書くつもりですApp.js , 最初にテストを書きましょうApp.test.js ファイル.

要件

この機能の要件は以下の通りです.

ボタンをクリックして表示される値を1増加

かなり簡単な右?まずテストを書きましょう.

テストを書く

The testing-library ボタンでアクションをトリガーするためのツールを提供します.非常に良い!
必要なツールをインポートすることから始めましょう.我々は、画面上の[ Click ]をクリックして[イベント]ボタンをクリックして、カウンタ内の値を増やすために、テスト機能を非同期になります.

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

The UserEvent クリックすると、入力、および大いに多くのようなユーザートリガのアクションをシミュレートするツールです.そして、テストです.

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

describe('Render the counter with Button', () => {
  render(<App />);

  it("render counter", async () => {
    const appElement = screen.getByTestId('app-test');
    expect(appElement).toBeInTheDocument();

    // Testing that the counter element has the correct default value
    const counterElement = screen.getByTestId('counter-test');
    expect(counterElement).toHaveTextContent('0');

    // Retrieving the button element
    const buttonElement = screen.getByTestId('button-counter-test');
    expect(buttonElement).toBeInTheDocument();

    // Triggering the click event on the button

    await userEvent.click(buttonElement);

    // Testing that the counter element has the correct value
    expect(counterElement).toHaveTextContent('1');
  })
});

すごい!テストは正常に失敗します.機能を書きましょう.

フルカウンタ機能を書く

インサイドApp.js ファイルを次のコンテンツを追加します.

import React from "react";
import Counter from "./components/Counter";

function App() {

  const [count, setCount] = React.useState(0);

  return (
    <div data-testid="app-test">
      <Counter value={count} />
      <button data-testid="button-counter-test" onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default App;

我々は反応を使用しています.USENTは、状態を追跡し、変更するために管理する.
その後、すべてのテストを再度実行します.そして、それは緑でなければなりません.🟢

そして、おめでとう!我々は、ちょうどTDDを使用していくつかの反応を行ってきた.次の記事では、我々はTDDDにはRedUxとThunkで深く潜るよ.リモートバックエンドから独立した完全なテスト環境を設定します.🔥
かなり面白い、右?さて、あなたがそれについて情報を得たいならば、私はニュースレターを始めています.私が10人の加入者を通過するならば、私は毎週それからキックを始めます.🚀
購読できますhere .
記事投稿bloggu.io . 無料でお試しください.