【初心者向け】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の場合は、売り上げ金額を正確に取得します。
本当は、ダミーのモックデータを作ることもできるのですが、本質的ではないので、
一応、まあこれは、ちゃんとコンポーネントがレンダリングされてるということで、
良しとします。
テストは、どこまで細かく書くか、色々検討要素あるので、
考えながらやっていきたいですよね。
以上です。
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！