サイトアイコン 上尾市のWEBプログラマーによるブログ

「Reactではじめるフロントエンド開発入門」の感想・備忘録2

管理者
posted with ヨメレバ
Amazonで見る
Kindleで見る
「Reactではじめるフロントエンド開発入門」の感想・備忘録1
posted with ヨメレバAmazonで見るKindleで見る Kindle本「Reactではじめるフロントエンド開発入門」のまとめ。 点数 83点 感想 とてもわかりやすかった。create-react-appを使わずに、webpackの設定を手動で行っている点が勉強になった。npmのパッケージ名に古いものがあったが、それ以外は最新の内容（webpackバージョン4についての記述もあり）に...
ageo-soft.info
2020.05.28
「Reactではじめるフロントエンド開発入門」の感想・忘備録1の続き

テスト

JESTとは

JavaScript、特にReactのテスト駆動開発をするためのテストフレームワーク。
以下の3つのメソッドを使ってテストケースを作成する。

  1. describe関数
    複数のテストケースをテストスイートとしてまとめる
  2. it関数
    テストケースを定義する
  3. expect関数
    it関数の中で、実行結果が期待していたものかどうか確認する

JESTの使い方

  1. インストール
    yarn add jest --dev
  2. __test__ディレクトリ作成
    mkdir src/__tests__
    Jestはプロジェクトのルートディレクトリ以下にある__test__ディレクトリを自動的に検出してテストを実行する。
  3. テスト用ファイル作成
    touch src/__tests__/xxx.test.js
    拡張子は.test.jsとするのが慣例。
    describe('test1', () => {
      it('test1-1', () => {
        expect(1 + 1).toBe(2);
      });
    });
  4. テスト実行
    npx jest
    （またはpackage.jsonのscriptに”test”: “jest”を追加してyarn testとする）

Enzyme

Reactのテストはコンポーネントをマウントさせる必要があるため、Jest単体では行うことができない。EnzymeというReactの仮想レンダラーを使うのが一般的。
EnzymeはReactのバージョンに合わせたアダプタが必要である。

  1. インストール
    yarn add enzyme enzyme-adapter-react-16 --dev
    ※私の環境ではエラーになったのでyarn upgradeを行ったところ成功した
    (https://qiita.com/akameco/items/301aff5f30d673c6ab17)
  2. babel-jestのインストール
    yarn add babel-jest --dev
    ES6で記述されたコンポーネントをJestでテストするのに必要。
  3. .babelrcの作成
    touch .babelrc
    中身は以下。
    {
      "@babel/preset-env", "@babel/preset-react"
    }
  4. テストケースを以下のように定義する
import React from 'react';
import { configure,  shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import MyInput from '../my_input.js'

configure({ adapter: new Adapter() });

describe('test1', ()=> {
  const myInput = shallow(<MyInput/>);

  it('test1-1', () => {
    myInput.find('input').simulate('change', {target: {value: 100}});
    expect(myInput.state('num')).toBe(100);
  });
});

以下、テストに使ったコンポーネント

import React from "react";

export default class MyInput extends React.Component {
  constructor() {
    super();
    this.state = {
      num: 0,
    };
    this.handleNumChange = this.handleNumChange.bind(this);
  }
  handleNumChange(e) {
    this.setState({num: e.target.value});
  }
  render() {
    return (
      <p>
      <input type="text" onChange={this.handleNumChange} />{this.state.num}
      </p>
    )
  }
}
  1. テスト実行
    npx jest

fetch API

fetch APIとは

XMLHttpRequestに代わる新しいWebブラウザ標準API。
IEやiOS safari10.2以下(iPhone7以下)は非対応なので、対応させる場合はポリフィルが必要。
yarn add isomorphic-fetch --devでインストール。
import fetch from 'isomorphic-unfetch'でインポート。

※babel7.4以降では、core-js@3と@babel/preset-envをインストールして以下のようにプリセットを指定するだけでよい。
（https://aloerina01.github.io/blog/2019-06-21-1）

presets: [
  ["@babel/preset-env", {
     useBuiltIns: "usage",
     corejs: 3
  }]
]

fetch APIの使い方

fetch("https://www.reddit.com/r/newsokur/.json")
  .then(response => response.json())
  .then(json => {
    let items = json.data.children.map(item => {
      return item.data;
    });
    this.setState({items: items});
  });

以下のように書くことも可能。

fetch("https://www.reddit.com/r/newsokur/.json")
  .then(response => {
    response.json().then((json) => {
      // 処理
    })
  });
モバイルバージョンを終了