やったこと

• React Testing Library を使用したテストの作成

学んだこと

React Testing Library

get系

指定の要素を取得する。
名前から「特定の要素が存在することが自明であり、その要素が持つ何か（値など）をテストしたい」時に使用するイメージ。

query系

指定の要素を取得する。
名前から、「特定の要素が存在するか」をテストするときに使用するイメージ。

また、要素が見つからなかった場合の挙動が異なる。

• get系 ... エラー
• query系 ... nullを返却

そのため、「要素が存在しないこと」をテストするときに役立つ。

find系

指定の要素を取得する。
機能的には query と同じだが、queryと異なりpromiseを返却する。
そのため、要素が非同期で取得・表示される場合に活用できる。

参考

• https://levelup.gitconnected.com/the-difference-between-get-find-query-react-testing-library-bcd996ba3baa
• https://dotengineerblog.net/how-to-use-react-testing-library-queries/

Javascript 非同期処理

例外処理

Promise構文の場合、 then().catch で書く。
async/await の場合、try{}catch(){} で書く。

参考

https://qiita.com/soarflat/items/1a9613e023200bbebcb3#%E4%BE%8B%E5%A4%96%E5%87%A6%E7%90%86%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%8F%E3%83%B3%E3%83%89%E3%83%AA%E3%83%B3%E3%82%B0

jest の mock

jestのmock関数を使用することで、任意の関数を、ダミーデータを返却する関数へ差し替えることができる。

主に、外部のAPIと通信するような関数（ fetch や axios ）をmock化する用途で使用される。