jest react typescript チェックボックスのラベルを探す

# 概要
jest でラベルを探します。
ラベルをつけることで複数のコントロールをまとめて制御できます。

# 開発環境
IDE:GitHub CodeSpaces
OS:windows10
言語：TypeScript

├── @testing-library/jest-dom@5.16.5
├── @testing-library/react@13.4.0
├── @testing-library/user-event@13.5.0
├── @types/jest@29.2.3
├── @types/node@16.18.4
├── @types/react-dom@18.0.9
├── @types/react@18.0.25
├── jest@29.3.1
├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
├── UNMET DEPENDENCY test@jest
├── ts-jest@29.0.3
├── typescript@4.9.3
└── web-vitals@2.1.4

# 実装
## プロダクトコード
``` App.tsx
import {useState} from 'react';
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
	const [buttonColor, setButtonColor] = useState('red');
	const newButtonColor = buttonColor === 'red'? 'blue' : 'red';
	const [disabled,setDisabled] = useState(false);
	const [disabledSecond,setDisabledSecond] = useState(true);
  return (
    <div >
    <button 
		style={{backgroundColor: buttonColor}} 
		onClick={() => setButtonColor(newButtonColor)}
		disabled={disabled}
		>
		Change to {newButtonColor}
	</button>
		{/* <input type ="checkbox"  checked={true}/> */}
		<input 
			type ="checkbox"
			id="disable-button-checkbox"
			defaultChecked = {disabled}
			onChange={(e) => setDisabled(e.target.checked)} 
			/>
			<label htmlFor="disable-button-checkbox">Disable button</label>
		
			<input 
			type ="checkbox"
			id="disable-button-checkbox-two"
			defaultChecked = {disabledSecond}
			onChange={(e) => setDisabledSecond(e.target.checked)} 
			/>
			<label htmlFor="disable-button-checkbox-two">Disable button</label>
		</div>

  );
}

export default App;


```


## テストコード

``` App.test.tsx

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';

test('Checkbox disable button on first click and enables on second click',()=>{
	render(<App />);
	//　使うタイミング　複数チェックボックスがあるときに使えそう
	const checkbox = screen.getAllByRole('checkbox',{name: 'Disable button'});

	const colorbutton = screen.getByRole('button',{name: 'Change to blue'});

	fireEvent.click(checkbox[0]);
	expect(colorbutton).toBeDisabled();

	fireEvent.click(checkbox[0]);
	expect(colorbutton).toBeEnabled();
});

```

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

![TestLabel1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/3eb45bb9-3596-fc02-34c4-9cdf4da05659.gif)


# github


https://github.com/RYA234/my_learning_React_with_jest_and_ReactTestingLibrary/commit/6f426015990d4a82e18591579d1bcf7e92f41144

# 参考
    
section 23

https://www.udemy.com/course/react-testing-library/learn/lecture/24450660#content

htmlforについて初見だったんで調べました。
Reactはhtmlとjavascriptが一つのファイルになっているから、javascript側とhtml側のforが被ってしまった。
その被りを解消するためにhtml側のforをhtmlforにしたようです。

https://ja.reactjs.org/docs/dom-elements.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/52633dde-38e7-cb24-b806-60e999b3e356.png)


https://developer.mozilla.org/ja/docs/Web/HTML/Element/label

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/c6ddb71e-a25c-3cd0-11ac-d145dd386772.png)