7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Reactjs のテストを karma + karma-fixture + mocha + power-assert で書いてみる

Posted at

前回書いた ReactJS + Flumpt のカウンターのサンプル にテストを追加してみる。

karuma インストールと設定

$ npm install --save-dev karma
$ node_modules/.bin/karma init
> mocha

> no

> Chrome

>

>
yes

テストで必要なライブラリをインストール

$ npm install --save-dev babel-plugin-espower karma-browserify power-assert karma-fixture karma-html2js-preprocessor

karma.conf.js

// Karma configuration
// Generated on Mon Dec 21 2015 12:22:32 GMT+0900 (JST)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'browserify'],


    // list of files / patterns to load in the browser
    files: [
      'test/fixtures/**/*.html',
      'test/**/*.spec.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/fixtures/**/*.html': 'html2js',
      'test/**/*.spec.js': 'browserify'
    },

    browserify: {
      debug: true,
      transform: [
        ['babelify', {plugins: ['babel-plugin-espower']}]
      ]
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultanous
    concurrency: Infinity
  });
};

テスト用のファイルを書く

$ mkdir test
$ emacs test/counter.spec.js

test/counter.spec.js

'user strict';

import assert from 'power-assert';


describe('Click a button', () => {
  let countSelector = '.js-container > div > p > span:nth-child(2)';

  before(() => {
    document.body.innerHTML = window.__html__['test/fixtures/index.html'];
    require('../src/app.jsx');
  });

  after(() => {
    document.body.innerHTML = '';
  });

  it('1 increases', () => {
    let incBtn = document.querySelector('button:nth-child(1)');
    let init_count_num = Number(document.querySelector(countSelector).textContent);
    let count_num;

    incBtn.click();

    count_num = Number(document.querySelector(countSelector).textContent);
    assert(init_count_num + 1 === count_num);

  });

  it('1 decreases', () => {
    let decBtn = document.querySelector('button:nth-child(2)');
    let init_count_num = Number(document.querySelector(countSelector).textContent);
    let count_num;

    decBtn.click();

    count_num = Number(document.querySelector(countSelector).textContent);
    assert(init_count_num - 1 === count_num);
  });

});

フィクスチャ

$ mkdir test/fixtures/
$ emacs test/fixtures/index.html

test/fixtures/index.html

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

package.json

"scripts" に追加

    "test": "karma start",

テスト 実行

$ npm test

Chrome 47.0.2526 (Mac OS X 10.10.5): Executed 2 of 2 SUCCESS (0.103 secs / 0.017 secs)

参考

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?