React Testing Library
2023/8/24 20:47:00
React Testing libraryによって100を超えるテストケースが実装された。10秒ほどでそのすべてが実行される。
コードの保存、コミット、プッシュのたびに自動テストが実行されるようにしてある。
テスト作成になれてきている。加えて、一度テストを作成した箇所はテストの追加が容易だ。だんだんとテスト作成速度が上がってきている。
import { render, screen } from '@testing-library/react';
import App from './App';
for (let i = 0; i < 1000; i++) {
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
}
Powershell: 16.379 s
WSL2(Ubuntu): 7.914 s
実環境ではTypeScriptを使っており、TypeScriptからJavaScriptへのトランスパイルに時間をとられている可能性がある。
そこで、TypeScriptでのReactAppを作成し、App.test.tsxを30個までコピペして増やし、テストにかかる時間を計測した
Powershell: 4.725 s
WSL2(Ubuntu): 1.851 s
import { render, screen } from '@testing-library/react';
import App from './App';
import userEvent from '@testing-library/user-event';
for (let i = 0; i < 100; i++) {
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
const inputElement = screen.getByRole("textbox")
userEvent.type(inputElement, "this is test typing")
expect(linkElement).toBeInTheDocument();
});
}
Powershell: 29.874 s
WSL2(Ubuntu): 19.381 s