https://blog.pumpkin-raccoon.com/81
https://velog.io/@velopert/react-testing

概要

TDD(Test Driven Development)

https://gmlwjd9405.github.io/2018/06/03/agile-tdd.html
テストブート開発は、非常に短い繰り返しテストを使用するソフトウェア方法論であり、繰り返しステップによって実現される.すなわち、小さなユニットのテストケースを作成し、テストに合格したコードを追加する.
まずテストを作成し、テストに合格した内容を作成します.つまり、作成中にまずテストを作成し、テストに合格したコードを作成し、繰り返し実行された正しい操作に関するフィードバックを積極的に受け取ります.

テストの種類

フロントエンドのテストには3種類あります.

ユニットテスト

これは、最小単位util関数、custom reaction hook、または構成部品をテストする方法です.
1つの機能のみを重視してテストを行うため、単独で運行が良好であることを確認しても、全体の運行が良好であることは保証されません.

統合テスト

これは、複数の素子を機能単位で組み合わせて試験する方法である.
複数のコンポーネントの相互作用が良好であるか、DOMイベントが良好であるかを確認します.テスト終了後の構成部品やモジュールを組み合わせてテストする流れもあります.

End-to-end Tests (E2E)

SeleniumまたはPerfecterを使用して、プロジェクトがブラウザ上で正常に動作しているかどうかをテストします.このとき、サーバ、インフラストラクチャ、Webアプリケーションがテストされます.

TDDプロセス

https://velog.io/@Veloopert/TDDの-概要
大別して失敗、成功と尊敬に分けることができます.

失敗

次に、実装する機能が一つ一つ失敗するテストケースを作成します.開発チーム/状況に応じて、1回に複数のテストケースを作成します.

成功

失敗したテスト例を記述するために、コードを記述してテストのステップに合格します.

改造する

実装されたコードに重複するコードがある場合、またはさらに改善された方法がある場合、再構築が行われる.再包装を行った後も試験用例が成功したかどうかを確認します.このプロセスが完了した場合は、最初のステップに戻り、次の機能を実現するために新しい失敗したテストケースを作成します.

テストツール

javascript、反応テストに分けることができます.

JavaScriptのテスト

https://velog.io/@veloper/JavaScript-テストの基礎

Karma

Jasmine

Jest

Chai

Mocha

以下のテストツールでは、アクセスしやすいJestを使用します.

npm install jest
npm isntall @types/jest // vscode에서 인텔리센스(자동완성) 지원을 해준다.

test(it)

const sum = (a, b) => {
	return (a + b);
}

test('1 + 2 = 3', () => {
  expect(sum(1,2)).toBe(3);
});

testキーワードは、テスト例を作成する関数です.itキーワードもテスト例を作成する関数であり、testと全く同じである.私にテストテープの種類によって区別して可読性を実現をさせて、1つ書けば正常に仕事ができます.expectは、特定の値として事前に定義されており、合格するとテクノロジーが成功し、合格できない場合はテストに失敗します.toBeはmatcherであり、所望の値が私たちが設定した値と一致するかどうかを確認し、結果を端末に出力します.toBeを除いて、様々な場合に適切なマッチング器が存在する.

toBe(a) // 예상한 값이 매개변수와 같은 값일 것인지 확인합니다.
toEqual(obj) // 매개변수(객체)와 같은 값일 것이라 예상합니다. 객체가 가진 값의 비교가 가능합니다.
not.toBe(a) // 뒤의 결과를 부정하는 값과 비교합니다.

toBeNull() // 예상한 값이 null 인지 확인합니다.
toBeUndefined() // 예상한 값이 undefined 인지 확인합니다.
toBeDefined() // 예상한 값이 undefined 가 아닌지 확인합니다.
toBeTruthy() // 예상한 값이 truthy 한 값인지 확인합니다.
toBeFalsy() // 예상한 값이 falsy 한 값인지 확인합니다.

toBeGreaterThan(number); // number보다 큰 값인지 확인합니다.
toBeGreaterThanOrEqual(number); // number보다 크거나 같은 값인지 확인합니다.
toBeLessThan(number); // number보다 작은 값인지 확인합니다.
toBeLessThanOrEqual(number); // number보다 작거나 같은 값인지 확인합니다.
toBeCloseTo(float) // float인 매개변수와 같은 값인지 확인합니다. 부동소수점 에러를 해결하기 위해 고안되었습니다.

toMatch(string) // string을 포함하는 문자열인지 확인합니다.
toContain('item') // item을 포함하는 배열(iterator)인지 확인합니다.

toThrow() // 예외를 발생시키는지 확인합니다.

https://www.daleseo.com/jest-basic/

describe

describeキーワードを使用して、試験例を組み合わせることができる.

function sum(a, b) {
  return a + b;
}

function sumOf(numbers) {
  let result = 0;
  numbers.forEach(n => {
    result += n;
  });
  return result;
}

describe('sum', () => {
  it('calculates 1 + 2', () => {
    expect(sum(1, 2)).toBe(3);
  });

  it('calculates all numbers', () => {
    const array = [1, 2, 3, 4, 5];
    expect(sumOf(array)).toBe(15);
  });
});

複数のテストケースがsumに分類されていることがわかります.

はんのうしけん

反応素子をテストするとき、通常、どの結果が画面に良好に表示され、どのイベントまたは関数が呼び出し時に必要な更新をよく反映できるかをチェックします.Javascriptテストのようにjestを使用してコンポーネントの概念を追加しても、あまり違いはありません.
基本的な方法は次のとおりです.  [react-dom/test-utils](https://reactjs.org/docs/test-utils.html)  組み込まれたユーティリティ関数を使用していますが、これらのユーティリティ関数を直接使用してテストコードを記述するのは少し複雑で、テストライブラリを使用するのも不便です.  反応式ドキュメントでもおすすめです.

react-testing-library

パッケージをインストールします.

npm install @testing-library/jest-dom @testing-library/react
npm install @types/jest // VS Code를 사용한다면 추가!

srcフォルダでCRAでない場合はルートディレクトリにTestsを設定します.jsファイルを作成し、次のコードを記述します.

// setupTests.js
import @testing-library/jest-dom

反応計画に声をかけるjsコンポーネントを追加し、appにコンポーネントをレンダリングします.

// Hello.js
import React from "react";

const Hello = ({ username, name }) => {
  return (
    <div>
      <b>{username}</b>&nbsp;
      <span>{name}</span>
    </div>
  );
};

export default Hello;

// App.js
import React from "react";
import Hello from "./Hello";

const App = () => {
  return <Hello name="Kim" first="K" />;
};

export default App;

今後のテストのためにハローtest.jsファイルを生成したら、次のコードを作成します.

import React from "react";
import { render } from "@testing-library/react";
import Hello from "./Hello";

describe("<Hello />", () => {
  it("matches snapshot", () => {
    const utils = render(<Hello first="K" name="Kim" />);
    expect(utils.container).toMatchSnapshot();
  });
  it("shows the props correctly", () => {
    const utils = render(<Hello first="K" name="Kim" />);
    utils.getByText("K"); // K 라는 텍스트를 가진 엘리먼트가 있는지 확인
    utils.getByText("Kim"); // Kim 이라는 텍스트를 가진 엘리먼트가 있는지 확인
  });
});

素子を試験する際に用いられるキーワードはrenderであり,反応項目のindexである.jsレンダリングReactDOM.render(...)とは異なります.
ここでレンダリングされた結果には、DOMを選択できる検索およびContainerが含まれます.containerは、スナップショットテストに使用できるコンポーネントの最上位DOMを指します.

スナップショットのテスト

これは、レンダリングの結果が以前のレンダリングの結果と一致するかどうかを確認することを意味します.テストを実行すると、__snapshots__というフォルダにHello.test.js.snapというファイルが作成され、レンダリング結果がhtml表示に分解されます.

// Hello.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Hello /> matches snapshot 1`] = `
<div>
  <div>
    <b>
      K
    </b>
     
    <span>
      Kim
    </span>
  </div>
</div>
`;

構成部品をレンダリングするときにスナップショットと一致しない場合、テストは失敗します.スナップショットを更新したい場合は、コンソールウィンドウでuをクリックします.