Reactjs のテストを ava + jsdom で書いてみる #React

目的

ava + jsdom がどういうものかさらっと触れてみる。
ついでに以前書いた ReactJS + facebook/flux を ES6 の記述でカウンターのサンプルをリファクタしてみた。

ファイル構成

.
├── index.html
├── js
│   └── bundle.js
├── package.json
├── src
│   ├── app.jsx
│   └── app_dispatcher.js
└── test
    ├── hoge.html
    └── hoge_test.js

package

pacage.json

{
  "name": "ava_and_jsdom",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "browserify src/app.jsx -o js/bundle.js --debug",
    "watch": "watchify src/app.jsx -o js/bundle.js -v --debug",
    "test": "ava"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react"
          ]
        }
      ]
    ]
  },
  "author": "Takashi ITO",
  "license": "MIT",
  "devDependencies": {
    "ava": "^0.10.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "delay": "^1.3.1",
    "jsdom": "^7.2.2",
    "watchify": "^3.7.0"
  },
  "dependencies": {
    "flux": "^2.1.1",
    "react": "^0.14.6",
    "react-dom": "^0.14.6"
  }
}

インストールとかビルドとか

$ npm install
$ npm run watch (or npm run build)

コード

src/app.jsx

'use strict';

import AppDispatcher from './app_dispatcher';
import React from 'react';
import ReactDOM from 'react-dom';
import {EventEmitter} from 'events';


// Store
class CounterStore extends EventEmitter {
  constructor() {
    super();

    AppDispatcher.register(this._onAction.bind(this));

    this.CHANGE_EVENT = 'change';
    this.counter = 0;
  }

  _onAction(action) {
    switch(action.actionType) {
      case 'COUNTER/UPDATE':
        this.counter += action.num;
        this.emitChange();
        break;
    }
  }

  emitChange() {
    this.emit(this.CHANGE_EVENT);
  }

  addChangeListener(callback) {
    this.on(this.CHANGE_EVENT, callback);
  }

  removeChangeListener(callback) {
    this.removeListener(this.CHANGE_EVENT, callback);
  }

  getState() {
    return {count: this.counter};
  }
}
const counterStore = new CounterStore();


// Action creators
const CounterActions = {
  update: function(num) {
    AppDispatcher.dispatch({
      actionType: 'COUNTER/UPDATE',
      num: num
    });
  }
};


// Component
class CounterBtnComponent extends React.Component {
  render() {
    return (
      <div>
        <div>
          <button onClick={this.onClick.bind(this)}>+1</button>
          <button onClick={this.onClick.bind(this)}>-1</button>
        </div>
      </div>
    );
  }

  onClick(event) {
    CounterActions.update(Number(event.target.textContent));
  }
}


class AppComponent extends React.Component {
  constructor() {
    super();
    this.state = counterStore.getState();
  }

  componentDidMount() {
    counterStore.addChangeListener(this._onChange.bind(this));
  }

  componentWillUnmount() {
    counterStore.removeChangeListener(this._onChange.bind(this));
  }

  render() {
    return (
      <div>
        <span>count: {this.state.count}</span>
        <CounterBtnComponent />
      </div>
    );
  }

  _onChange() {
    this.setState(counterStore.getState());
  }
}


ReactDOM.render(
  <AppComponent />,
  document.querySelector('.js-container')
);

src/app_dispatcher.js

var Dispatcher = require('flux').Dispatcher;

module.exports = new Dispatcher();

index.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>React+ava+jsdom</title>
    </head>
    <body>
        <div class="js-container"></div>

        <script src="js/bundle.js"></script>
    </body>
</html>

表示

$ python -m SimpleHTTPServer 8000

http://localhost:8000

テストまわり

test/hoge.html

<div class="js-container"></div>

test/hoge_test.js

'use strict';

import test from 'ava';
import jsdom from 'jsdom';
import fs from 'fs';


const hoge_html = fs.readFileSync('hoge.html', 'utf-8');
const dom = {
  then: (onFulfill, onReject) => {
    const config = {
      html: hoge_html,
      scripts: ['../js/bundle.js'],
      done: (err, window) => {
        if (err) {
          onReject(err);
        } else {
          onFulfill(window);
        }
      }
    };

    jsdom.env(config);
  }
};
const SELECTOR = {
  counterNum: 'body > div.js-container > div > span > span:nth-child(2)',
  plusBtn: 'body > div.js-container > div > div > div > button:nth-child(1)',
  minusBtn: 'body > div.js-container > div > div > div > button:nth-child(2)'
};


test('initial counter num', t => {
  return Promise.resolve(dom)
    .then((window) => {
      let counterNum = window.document.querySelector(SELECTOR.counterNum).textContent;
      t.is(counterNum, '0');
    });
});

test('1 increases when click +1 button', t => {
  return Promise.resolve(dom)
    .then((window) => {
      let plusBtn = window.document.querySelector(SELECTOR.plusBtn);
      plusBtn.click();
      return window;
    })
    .then((window) => {
      let counterNum = window.document.querySelector(SELECTOR.counterNum).textContent;
      t.is(counterNum, '1');
    });
});

test('1 decreases when click -1 button', t => {
  return Promise.resolve(dom)
    .then((window) => {
      let plusBtn = window.document.querySelector(SELECTOR.minusBtn);
      plusBtn.click();
      return window;
    })
    .then((window) => {
      let counterNum = window.document.querySelector(SELECTOR.counterNum).textContent;
      t.is(counterNum, '-1');
    });
});

ava のアサーション

.pass([message])
.fail([message])
.ok(value, [message])
.notOk(value, [message])
.true(value, [message])
.false(value, [message])
.is(value, expected, [message])
.not(value, expected, [message])
.same(value, expected, [message])
.notSame(value, expected, [message])
.throws(function|promise, error, [message])
.doesNotThrow(function|promise, [message])
.ifError(error, [message])

テスト実行

$ npm test

> sample@1.0.0 test /Users/username/sample/
> ava

  3 passed

感想

想定してたより書きやすそうかも。
ava は mocha より高速らしいけど計測して無いのでよくわからない。（比較記事ないのかな？）

Reactjs のテストを ava + jsdom で書いてみる

目的

ファイル構成

package

インストールとかビルドとか

コード

表示

テストまわり

ava のアサーション

テスト実行

感想

参考