1. 컴포넌트 만들기

src > components > Light.jsx

import {useState} from 'react';

function Light({ name }) { // name을 props로 받아서 화면에 보여줌
	const [light, setLight] = useState(false);

	return (
		<div>
			<h1>
				{name} {light ? 'ON' : 'OFF'}{' '}
			</h1>
			<button
				onClick={() => setLight(true)}
				disabled={light ? true : false}

				ON
			</button>
			<button
				onClick={() => setLight(false)}
				disabled={!light ? true : false}

				OFF
			</button>
		</div>
	);
}

export default Light;

App.js

import Light from './components/Light';

function App() {
	return <Light name="전원" />;
}

export default App;

ON / OFF 버튼에 따라 텍스트 바뀌는 컴포넌트

2. 컴포넌트 테스트하기

• 위 이미지 (전원 OFF 텍스트 활성화 = ON 버튼 활성화 = OFF 버튼 비활성화) 상태에서 테스트 진행

1) props로 전달된 '전원'이 올바르게 표시되어 있는지 테스트

src > components > Light.test.js

import { render, screen } from '@testing-library/react'; // 사용할 method 불러오기
import Light from './Light'; // 테스트할 컴포넌트 불러오기

it('renders Light Component', () => {
	render(<Light name="전원" />);
	const nameElement = screen.getByText(/전원/i);
	expect(nameElement).toBeInTheDocument();
})

2) OFF 버튼이 disabled로 되어 있는지 테스트

it('off button disabled', () => {
	render(<Light name="전원" />);
	const offButtonElement = screen.getByRole('button', { name: 'OFF' }); // 버튼 안 텍스트 내용을 { name : ~~ }으로
	expect(offButtonElement).toBeDisabled();
})

3) ON 버튼이 disabled가 아닌게 맞는지 테스트

• toBeDisabled 함수 앞에 not을 붙인다.

  it('on button enable', () => {
    render(<Light name="전원" />);
    const onButtonElement = screen.getByRole('button', { name: 'ON' });
    expect(onButtonElement).not.toBeDisabled();
  });

4) 버튼 클릭 이벤트 유무 테스트

• fireEvent 사용

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

it('change from off to on', () => {
	render(<Light name="전원" />);
	const onButtonElement = screen.getByRole('button', { name: 'ON' }); // ON 버튼(현재 활성화 상태)
	fireEvent.click(onButtonElement); //  해당 요소(ON 버튼)를 클릭하면
	expect(onButtonElement).toBeDisabled(); // 비활성화 상태가 맞는지
})

• 활성화 상태이던 ON 버튼이 비활성화 상태가 되는 것이 맞으므로 테스트는 PASS된다.