Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Update intro-to-storybook/react/ja to 8.3 #793

Merged
merged 1 commit into from
Jan 7, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions content/intro-to-storybook/react/ja/screen.md
Original file line number Diff line number Diff line change
Expand Up @@ -329,13 +329,13 @@ Storybook で `error` ストーリーが意図したように動作している
/>
</video>

## インタラクションテスト
## コンポーネントのテスト

これまでで、シンプルなコンポーネントから画面まで、完全に機能するアプリケーションを作り上げ、ストーリーを用いてそれぞれの変更を継続的にテストすることができるようになりました。しかし、新しいストーリーを作るたびに、UI が壊れていないかどうか、他のすべてのストーリーを手作業でチェックする必要もあります。これは、とても大変な作業です。

この作業や操作を自動化することはできないのでしょうか?

### play 関数を使ったインタラクションテスト
### play 関数を使ったコンポーネントのテスト

Storybook の [`play`](https://storybook.js.org/docs/react/writing-stories/play-function) 関数と [`@storybook/addon-interactions`](https://storybook.js.org/docs/writing-tests/component-testing) が役立ちます。play 関数はストーリーのレンダリング後に実行される小さなコードスニペットを含んでいます。

Expand Down Expand Up @@ -456,7 +456,7 @@ yarn test-storybook --watch
```

<div class="aside">
💡 play 関数でのインタラクションテストはUIコンポーネントをテストするための素晴らしい手法です。ここで紹介したもの以外にも、さまざまなことができます。もっと深く学ぶには<a href="https://storybook.js.org/docs/writing-tests/component-testing">公式ドキュメント</a>を読むことをお勧めします。
💡 play 関数を用いたコンポーネントのテストはUIコンポーネントをテストするための素晴らしい手法です。ここで紹介したもの以外にも、さまざまなことができます。もっと深く学ぶには<a href="https://storybook.js.org/docs/writing-tests/component-testing">公式ドキュメント</a>を読むことをお勧めします。
<br />
テストをさらにもっと深く知るためには、<a href="/ui-testing-handbook">Testing Handbook</a> をチェックしてみてください。これは開発ワークフローを加速させるために、スケーラブルなフロントエンドチームが採用しているテスト戦略について解説しています。
</div>
Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/react/ja/test.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Storybook のチュートリアルをテスト抜きには終われません。

- **手動テスト**では、コンポーネントの正しさを開発者が手動で確認します。コンポーネントを作成する際、見た目が問題ないかチェックするのに役立ちます。
- **アクセシビリティテスト**では、a11y アドオンを使用し、コンポーネントがみなさんに受け入れやすいか検証します。これらは、どのように障害を持つ人々が私たちのコンポーネントを使うのかという情報を取得するのに大いに役立ちます。
- **インタラクションテスト**では、play 関数を使用し、コンポーネントが期待通りの動作をすることを検証します。これらは、コンポーネントの挙動をテストするのに適しています。
- **コンポーネントのテスト**では、play 関数を使用し、コンポーネントが期待通りの動作をすることを検証します。これらは、コンポーネントの挙動をテストするのに適しています。

## 「でも、見た目は大丈夫?」

Expand Down
Loading