Jest React TypeScript popoverのテスト

# 概要
popoverのテストを実装します。
![popover.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d9b0e0a1-d8ed-48ce-80ca-9ccc44193e59.gif)




# 開発環境
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を確認しています。
ウィンドウの並びは左から順に、テストコード、プロダクトコード、プレビューという構成です。

![popovertestpattern.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/7aeeb9df-9808-3f87-94d5-acda486ffb90.gif)


# github

https://github.com/RYA234/my_learning_React_with_jest_and_ReactTestingLibrary/commit/853e903fca4ad246660921062358a89735e45153

# 参考

https://react-bootstrap.github.io/components/overlays/#popovers


https://testing-library.com/docs/user-event/convenience/#hover

Section 4 41 and 42

https://www.udemy.com/course/react-testing-library/