리액트 테스트 도구 - react-testing-library

@testing-library는 DOM 테스팅 라이브러리이다.

사용자 중심 방식으로 UI 컴포넌트를 테스트하는 데 도움을 주는 라이브러리이다.

 

https://testing-library.com/docs/react-testing-library/intro/

React Testing Library | Testing Library

npm install --save-dev @testing-library/react

 

App.js

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

App.test.js

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

describe('<App />', () => {
	test('renders component correctly', () => {
		const { container } = render(<App />);
		expect(container.getElementsByClassName('App-logo')).toHaveLength(1);
		expect(container.getElementsByClassName('App-logo')[0]).toHaveAttribute('src','logo.svg');
	});
});

describe('<App />', () => {
	test('renders component correctly', () => {
		const { container } = render(<App />);
		expect(container.getElementsByTagName('p')).toHaveLength(1);
		expect(container.getElementsByTagName('p')[0]).toHaveTextContent('Edit src/App.js and save to reload');
	});
});

describe('<App />', () => {
	test('renders component correctly', () => {
		const { container } = render(<App />);
		expect(container).toMatchSnapshot();
	});
});

 

1) 첫 테스트

npm test

여기서 Snapshots 정상적으로 되면 아래와같이 __snapshots__ 폴더가 생기며 안에 스냅샷 파일(App.test.js.snap)이 생긴다.

 

이제 원본 파일 App.js를 수정해보자.

+ 스냅샷 파일과 비교하여 수정된 부분을 알려준다.

의도된 수정이 맞다면 u 를 눌러준다.

 

스냅샷에 update 정상 처리되는것을 볼수있다.