Playwrightでコンポーネントテストができる
Playwrightはpage.goto()でURLを指定して、遷移先のページにアクセスしてテストをするイメージを持たれている方が多いと思いますが、コンポーネントを以下のようなコードで直接テストすることもできます。
app.spec.tsx
import { test, expect } from '@playwright/experimental-ct-react'
import App from './App'
import Counter from './Counter'
test('h1 test', async ({ mount }) => {
const component = await mount(<App />)
const h1 = component.locator('h1')
await expect(h1).toHaveText('Vite + React')
await expect(component).toHaveScreenshot()
await component.screenshot({ path: './screenshot/h1_test.png'})
})
test('counter test', async ({ mount }) => {
const component = await mount(<Counter />)
await component.getByRole('button').click()
const countBtn = component.getByRole('button')
await expect(countBtn).toHaveText('count is 1')
await component.screenshot({ path: './screenshot/counter_test.png'})
})この記事では、その方法について説明します。
Playwrightでコンポーネントテストをする準備
まず、以下のコマンドでテストを実行するためのReact環境を準備してください。
npm create vite@latest my-react-test -- --template react-swc-ts実行したら以下のコマンドでインストールして起動してください。
cd my-react-test
npm install
npm run devnpm run dev を実行すると http://localhost:5173/ にアクセスできます。
画面には以下のような内容が表示されます。
コンポーネントテスト環境のセットアップ
Playwrightでコンポーネントテストを行うには、以下のコマンドを実行して環境をセットアップする必要があります。
npm init playwright@latest -- --ctセットアップの途中でフレームワークを選択する質問が表示されたら、「React」を選んでください。
? Which framework do you use? (experimental) …
❯ React 18
React 17
Vue 3
Vue 2
Svelte
Solidその他の質問については、すべて Enter キーを押してデフォルトの設定で進めて問題ありません。
インストールが完了したら、コンポーネントのテストを行うために App.tsx を以下のように修正し、新たに Count.tsx を追加してください。
App.tsx
import Counter from './Counter'
import './App.css'
function App() {
return (
<>
<h1>Vite + React</h1>
<Counter />
</>
)
}
export default AppCounter.tsx
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return (
<>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
</div>
</>
)
}
export default Counter次に、コンポーネントのテスト用に app.spec.tsx を作成し、テストコードを記述します。
今回は<App />のh1と＜Counter />のボタンのテキストのテストを行います。
app.spec.tsx
import { test, expect } from '@playwright/experimental-ct-react'
import App from './App'
import Counter from './Counter'
test('h1 test', async ({ mount }) => {
const component = await mount(<App />)
const h1 = component.locator('h1')
await expect(h1).toHaveText('Vite + React')
await component.screenshot({ path: './screenshot/h1_test.png'})
})
test('counter test', async ({ mount }) => {
const component = await mount(<Counter />)
await component.getByRole('button').click()
const countBtn = component.getByRole('button')
await expect(countBtn).toHaveText('count is 1')
await component.screenshot({ path: './screenshot/counter_test.png'})
})以上の手順が完了したら「npm init playwright@latest -- --ct」を実行してapp.spec.tsxを実行します。
npm init playwright@latest -- --ct実行すると以下のようにコンポーネントのテスト結果が表示されます。
$ npm run test-ct
> my-react-test@0.0.0 test-ct
> playwright test -c playwright-ct.config.ts
Running 6 tests using 4 workers
6 passed (6.9s)スクリーンショットはコンポーネント部分のみ保存されます。
