taserbeat / gossip-memory

OoTRのゴシップストーンのヒントをメモするアプリ

0 stars 0 forks source link

Closed taserbeat closed 3 years ago

taserbeat commented 3 years ago

内容

フロントエンドのテストライブラリを調べ、コンポーネントのテストを行えるようにしておく。調べた内容はどこかのフォルダのREADME.mdなどにまとめておくとよいかも。

テストコードやそのライブラリについてググる。

taserbeat commented 3 years ago

コンポーネントが増えるならば、React Testing Libraryは使えそう。

taserbeat commented 3 years ago

次の記事はテストコードを書く際に考えるポイントとして参考になりそう。

taserbeat commented 3 years ago

テストツールはJestで、テストコードを書く際のライブラリはReact Testing Libraryとする。

create-react-appで作ったプロジェクトであればデフォルトでJestとReact Testing Libraryは導入済みである。

yarn test

で、Jestが走る。この時のオプションについては https://jestjs.io/docs/cli が参考になる。

taserbeat commented 3 years ago

React Testing Libraryは現時点でバージョンが >= 11.0.0のみをサポートしていると公式が述べている。ソースまた、React Testing Libraryのバージョンが低いと@testing-library/reactにscreenが無い。

import { screen } from '@testing-library/react';  // これがimportされない

そこで、@testing-library/reactパッケージのバージョンを更新する必要があった。参考

yarn upgrade @testing-library/react@^11.0.0

taserbeat commented 3 years ago

redux-toolkitのテストコードについては、create-react-appで作成されるsrc/features/counter/counterSlice.spec.tsがReducerのテストとなるので参考になった。

taserbeat commented 3 years ago

スナップショットテストとReducerテストの書き方がわかったので一旦closeとする。その他のテストの書き方については別のIssueを開いて調べることにする。