magazine off

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

投稿日 : 2021年3月18日(木曜日)

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の場合は、売り上げ金額を正確に取得します。

 

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

 

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

 

良しとします。

 

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

 

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

 

以上です。

Categories

Recent Posts

NativeBaseでsnsのフィードみたいなのを作ってみよう

  参考 https://docs.nativebase.io/Com…

投稿日 : 2018年12月12日(水曜日)

Goでtypeのstructの値たちをshuffle(シャッフル)させる

  実装 import ( "math/rand" ) んで func …

投稿日 : 2019年7月10日(水曜日)

Rootlessを無効にしなくてもOperation not permittedは解決できる

  やりたいこと gemでrubyをアップデート gemでcoc…

投稿日 : 2016年12月20日(火曜日)

二つの数の差を求める – Swift3

  環境 swift swift3 xcode xc…

投稿日 : 2017年11月4日(土曜日)