【Next.js】Contextを使用しているコンポーネントのテスト

下記のようなSampleContextというContextと、SampleContextを使用しているSampleというコンポーネントがあるとします。

"use client";
import React, { ReactNode, SetStateAction, useState } from "react";
import { Dispatch } from "react";
type Sample = { num: number; setNum: Dispatch<SetStateAction<number>>;
};
export const SampleContext = React.createContext({} as Sample);
export const SampleProvider = ({ children }: { children: ReactNode }) => { const [num, setNum] = useState<number>(0); return ( <SampleContext.Provider value={{ num, setNum }}> {children} </SampleContext.Provider> );
};

"use client";
import { SampleContext } from "@/provider/SampleContext";
import { useContext, useState } from "react";
const Sample = () => { const { num, setNum } = useContext(SampleContext); const [inputNum, setInputNum] = useState<number>(0); return ( <> <div>{num === 0 ? "0です" : "0以外です"}</div> <div> <input type="text" value={inputNum} onChange={(e) => setInputNum(Number(e.target.value))} /> </div> <div> <button onClick={() => setNum(inputNum)}>更新</button> </div> </> );
};
export default Sample;

上記Sampleコンポーネントで「0です」と表示されるケースと「0以外です」と表示されるケースのテストコードをReact Testing Libraryで書こうとして、どうやって書くか悩みましたが下記のようにしたらできました。

import "@testing-library/jest-dom";
import Sample from "@/components/Sample";
import { render, screen } from "@testing-library/react";
import { SampleContext } from "@/provider/SampleContext";
describe("Sample", () => { it("numが0の場合、「0です」と表示されること", () => { render( <SampleContext.Provider value={{ num: 0, setNum: jest.fn() }}> <Sample /> </SampleContext.Provider> ); expect(screen.getByText("0です")).toBeInTheDocument(); }); it("numが0以外の場合、「0以外です」と表示されること", () => { render( <SampleContext.Provider value={{ num: 1, setNum: jest.fn() }}> <Sample /> </SampleContext.Provider> ); expect(screen.getByText("0以外です")).toBeInTheDocument(); });
});

↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村