React Testing Libraryを使ってみた（Context編）

2021年3月13日

はじめに

今回はReact Testing Libraryを使用してContextのテストについて記述します。

テスト対象コンポーネント

ContextコンポーネントにCountContextを定義し、countのStateを保持しています。
ボタンを押下する度にcountをインクリメントしています。
CountContextの値をLastコンポーネントに表示しています。

import React from "react";
 
export const CountContext = React.createContext();
 
const Context = () => {
  const [count, setCount] = React.useState(0);
  return (
    <CountContext.Provider value={count}>
        <First />
        <button onClick={() => setCount(count + 1) }>button</button>
    </CountContext.Provider>
  );
};
 
export default Context;

import React from "react";
 
import Last from './Last';
 
const First = () => {
  return (
    <div>
      <Last />
    </div>
  );
};
 
export default First;

import React from "react";
 
import { CountContext } from './Context';
 
const Last = () => {
  const count = React.useContext(CountContext);
  return (
    <div>
      {count}
    </div>
  );
};
 
export default Last;

テストコード

初期表示が0で、ボタンを3回押下するとCountContextのStateが更新されて、3が表示される事をテストしています。

import React from 'react'
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
 
import Context, { CountContext } from './Context'
 
describe('Context', () => {
  it('buttonを3回クリックすると3が表示される事', () => {
    render(
      <CountContext.Provider value={0}>
        <Context />
      </CountContext.Provider>
    );
    
    expect(screen.getByText(0)).toBeInTheDocument();
 
    const button = screen.getByRole('button');
    userEvent.click(button);
    userEvent.click(button);
    userEvent.click(button);
    
    expect(screen.getByText(3)).toBeInTheDocument();
  });
})

未分類React

Posted by ababa