React

【初心者向け】Jestを使ってReact コンポーネントのテストを書く方法

Reactのコンポーネントのテストを書くとき、主に二種類のテストの書き方があります。

 

一つはユニットテスト、もう一つはE2Eテストです。

 

E2Eテストの特徴は、

 

実際にブラウザを操作してウェブアプリが動くすため、

 

ユーザーが操作するのと同じような環境で、同じような実行結果を得ることができる点です。

 

しかし、デメリットとしては、

 

実際にログイン作業を挟んだり、ブラウザを一々動かすので、時間がかかったりします。

 

また、コードの書き方は関係なく、動けばテストが通ってしまいます。

 

対して、ユニットテストは、コードでコンポーネントを呼び出して、

 

正しい値がリターンされるかをテストできるので、

 

より技術的に正しい動きをするのかテストすることができます。

 

また、ユニットテストを正しく、分かりやすく通すためのコンポーネント作成をする必要もあり、

 

コーディングの視点から言っても、ユニットテストを通しておくのは、

 

コードのクオリティの質を上げて、人が見てもコードがコンポーネントを呼び出しても、

 

分かりやすいコーディングの担保が増えます。

 

ということで、ReactではJestを使ってコンポーネントのテストができますから、

 

実際に書いてみましょう。

 

Reactコンポーネント

 

BalanceTotalAmount.js は、現在の売上金額を表示させるコンポーネントだとします。

 

export default function BalancCurrentSales(props) {

    const [amount, setAmount] = useState("0");

    useEffect(() => {
          const totalAmount = async (userId) => {
            const total = await axios.post(`${API_URL}/get_amount`,{ user_id: userId});
            setAmount(total.data);
          };
          totalAmount(props.user_id);
    }, [props.user_id]);

    return (
        <>
          <Container maxWidth="sm">
            <Typography variant="h6" align="center" color="textSecondary" paragraph>
             全ての取引の総合金額
            </Typography>
          </Container>
          <Typography variant="body1" align="center" color="textSecondary" paragraph>
          <div class="amount">{amount}</div> 
            </Typography> 
        </>
    );
}

 

こういう感じのコンポーネントが表示されるとして、

 

しっかりと、コンポーネントが呼び出されて、正しい表示が返ってくることを、

 

ユニットテストで確認したいとすると、こういう感じに書きます。

 

Jestテスト

 

BalanceTotalAmount.test.jsに、下記のように書きます。

 

import BalanceTotalAmount from "../Components/BalanceTotalAmount.js";

let container = null;
beforeEach(() => {
  container = document.createElement("div");
  document.body.appendChild(container);
});

it("売り上げ総合金額が取得できる", () => {
  act(() => {
    render(<BalanceTotalAmount user_id="0" />, container);
  });
  expect(container.getElementsByClassName("amount")[0].textContent).toBe("0");
});

 

こうすることで、BalanceTotalAmountコンポーネントをrenderして、

 

expect(container.getElementsByClassName("amount")[0].textContent).toBe("0");

 

これで、apiから0という値が返ってきたことを示します。

 

ちなみにこの0という値が返ってくるのは、renderでユーザーidに0を渡してくるかであり、

 

正しいユーザーidの場合は、売り上げ金額を正確に取得します。

 

本当は、ダミーのモックデータを作ることもできるのですが、本質的ではないので、

 

一応、まあこれは、ちゃんとコンポーネントがレンダリングされてるということで、

 

良しとします。

 

テストは、どこまで細かく書くか、色々検討要素あるので、

 

考えながらやっていきたいですよね。

 

以上です。

Pocket
LinkedIn にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-React

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.