Jest React TypeScript popoverのテスト

概要

popoverのテストを実装します。

開発環境

react-boostrapを追加して、エラーが出まくったので再構築

├── @testing-library/jest-dom@5.16.5
├── @testing-library/react@13.4.0
├── @testing-library/user-event@14.4.3
├── axios@0.27.2
├── bootstrap@5.2.3
├── eslint-plugin-jest-dom@4.0.3
├── eslint-plugin-testing-library@5.9.1
├── msw@0.47.4
├── react-bootstrap@2.7.0
├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
└── web-vitals@2.1.4

実装

プロダクトコード

プレビューで確認する用のApp.tsxです。

App.tsx

import logo from './logo.svg';
import './App.css';
import SummaryForm from './page/SummaryForm';

function App() {
  return (
    <div className="App">
      <header className="App-header">

		<SummaryForm />
      </header>
    </div>
  );
}

export default App;

メインのプロダクトコードです。

SummaryForm.tsx

import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";

export default function SummaryForm() {
	const [tcChecked, setTcChecked] = useState(false);
  
	const popover = (
		<Popover id="popover-basic">
		  <Popover.Body>No ice cream will actually be delivered</Popover.Body>
		</Popover>
	  );
  
	const checkboxLabel = (
	  <span>
		I agree to
		<OverlayTrigger placement="right" overlay={popover}>
			<span style={{ color: "blue" }}> Terms and Conditions</span>
		</OverlayTrigger>
	  </span>
	);
  
	return (
	  <Form>
		<Form.Group controlId="terms-and-conditions">
		  <Form.Check
			type="checkbox"
			checked={tcChecked}
			onChange={(e) => setTcChecked(e.target.checked)}
			label={checkboxLabel}
		  />
		</Form.Group>
		<Button variant="primary" type="submit" disabled={!tcChecked}>
		  Confirm order
		</Button>
	  </Form>
	);
  }

テストコード

SummaryForm.test.tsx

import { render, screen } from "@testing-library/react";
import SummaryForm from "../SummaryForm";
import userEvent from "@testing-library/user-event";

test("popover responds to hover", async () => {
	const user = userEvent.setup();
	render(<SummaryForm />);
  
	// popover starts out hidden
	const nullPopover = screen.queryByText(
	  /no ice cream will actually be delibered/i
	);
	expect(nullPopover).not.toBeInTheDocument();
  
	// popover appears on mouseover of checkbox label
	const termsAndConditions = screen.getByText(/terms and conditions/i);
	await user.hover(termsAndConditions);
	const popover = screen.getByText(/no ice cream will actually be delivered/i);
	expect(popover).toBeInTheDocument();
  
	// popover disappears when we mouse out
	await user.unhover(termsAndConditions);
	expect(popover).not.toBeInTheDocument();
  });

動かしたときの様子

下gifアニメは、テストコードを確認してるときの様子です。
プロダクトコードのpopoverの値を変えてPassとFailを確認しています。
ウィンドウの並びは左から順に、テストコード、プロダクトコード、プレビューという構成です。

github

参考

Section 4 41 and 42