まずは自分がほしい情報はなにかを書き出してから調べる。
抽象度が高い順から調べることにしてみる。
- テストコードとは？
- テストコードは何のためにあるのか？
- テストコードの範囲はどのぐらいが理想なのか？
- テスト手法には何があるのか？
- React Native expoにおけるテストはどれを使うべき？
- React Native expoでのテスト方法は何が最適なのか？
- スナップショットとは？
参考資料
1 https://qiita.com/jnchito/items/2a5d3e15761fd413657a
2 https://www.slideshare.net/sh-ogawa/ss-72206317
3 https://seichi23.hatenablog.com/entry/2018/04/08/170735
4 https://qiita.com/yuri_htt/items/fdb37b97fe809bab050b
5 https://tech.kitchhike.com/entry/react-native-test-frameworks
6 https://qiita.com/sand/items/af2af0766ca00558457d
7 https://blog.naoshihoshi.com/entry/2020/09/15/123000?utm_source=feed
8 https://tarosky.co.jp/tarog/4662
テストコードはアプリケーションの命綱、安全ネット、防弾チョッキ コードに対する不安を消す 将来の自分が楽をするために書く テストコードを書く理由→１つめ 自分がほしい情報はテストコードとはなにか？ →別記事を読む ２つ目 テストコードとは 書いたコードが開発者目線で思ったとおりに動いているのかを検査する →もっと情報がほしい ３つめ 変化を助けるテストコード 既存の実装の現状肯定じゃなくて、未来のコードベースに対して発展と成長の可能性をキープしていく意味合いでのテストコードの価値というのは、ほとんど話題に上らない。 整理する コードに対しての不安を消して、将来必要であるだろうコードに対してのアプローチが可能であるような処理をテストコードを用いることで明確に対処できる。 テストコードの範囲、対象になるもの React Nativeにおけるテスト範囲とはなにか？ 5つめ リファクタリングを行った箇所にテストコードを入れる →単体テスト、コンポーネントごとのテスト e2eテスト →expoの場合は7つめの資料 Cavyの導入しか選択肢はなさそう 統合テスト 単体テスト スナップショット スナップショットのテストではUI が予期せず変更されていないかを確かめることができます。スナップショットテストのシナリオは以下の3ステップになります。 １最初にテストを実行しスナップショットを作成し、作成されたUI(スナップショット)が正しいことを確認する ２プログラムに何らかの修正加える ３テストを実行し、UI(スナップショット)への予期せぬ影響がないことを確認する スナップショットの何が嬉しいのか？ 8つめ UI を生成するためのコードは、複雑化しやすく、またユニットテストの対象となるロジックを抽出することが難しいものになりがちです。また、短いライフサイクルで UI の変更やリリースがあることを考えると、重厚なテストを実施しても開発のリソースの無駄遣いになってしまうことが懸念されます。 スナップショットテストを用いることで、最低限のリグレッションテスト、つまり、意図しない変更の発生を検出することができます。スナップショットテストは簡単に作成して実行することができるため、コストの面で優れています。 最低限のリグレッションテストが可能で、gitの操作で戻りが発生した場合にどの場所で戻りが出てしまったのかを確認することができる。
以下の状態でスナップショットを実行する
import React from 'react';
import { View, Text } from 'react-native';
const TestView = () => {
return (
<View>
<Text>Test</Text>
</View>
);
};
export default TestView;
import React from 'react';
import renderer from 'react-test-renderer';
import TestView from './TestView';
describe('<TestView />', () => {
it('has 1 child', () => {
const tree = renderer.create(<TestView />).toJSON();
expect(tree).toMatchSnapshot(); // スナップショットを実行する
});
});__snapshots__フォルダが生成された。
UIの変更があった場合にエラーの出力がされた。
気になったもの
情報収集方法のまとめ
https://qiita.com/nesheep5/items/e7196ba496e59bb2aa28
読書
メモの魔力 -The Magic of Memos-
- メモのとり方
- どの場面でメモを取るようにしているのか
- 先日のgoAndoさんのインタビューであったメモのとり方とはどう違うのか
反省点
expoを使ったテストコードの書き方を調べていたがゆえに、テストコードについての概念だったり、テストについての知識を調べることに対しておろそかになってしまった。
物事を調べるときの方法として、抽象度の高いものから落とし込んで調べるのが効率良さそうだなと思った。
今回の例でいうとReact Native jest テストとかで調べていたので、確かにほしい情報は手に入れることはできたが、最終的に目指すところがあやふやなままだったので、行き詰まった。。。