3

ドキュメントを読んでいreactjsますが、完全に理解するのに苦労しています。ステップバイステップの例がもっとあればいいのにと思います。

コンポーネントとその子コンポーネントをテストできるようにしたいのですが、コンポーネントのモックまたはインスタンスを作成してテストする方法がわかりません。

コード：

import React from 'react/addons';
import Layout from '../../app/views/layout.js';

var TestUtils = React.addons.TestUtils;

var mockLayout;

describe('Layout (deep copy)', function() {
    beforeEach(function() {
        mockLayout = TestUtils.renderIntoDocument(<Layout />);
    });

    it('is DOM Component', function(done) {
        assert(TestUtils.isDOMComponent(mockLayout));
        done();
    });
});

エラーが発生しましたが、その意味がわかりません:

TypeError: Cannot read property 'getRouteAtDepth' of undefined
    at RouteHandler.createChildRouteHandler (base/spec/views/layout.js:23821:39)
    at RouteHandler.render (base/spec/views/layout.js:23836:27)
    at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (base/spec/views/layout.js:12011:35)
    at ReactCompositeComponentMixin._renderValidatedComponent (base/spec/views/layout.js:12038:15)
    at ReactPerf.measure.wrapper (base/spec/views/layout.js:3744:22)
    at ReactCompositeComponentMixin.mountComponent (base/spec/views/layout.js:11459:31)
    at ReactPerf.measure.wrapper [as mountComponent] (base/spec/views/layout.js:3744:22)
    at Object.ReactReconciler.mountComponent (base/spec/views/layout.js:3819:36)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (base/spec/views/layout.js:13014:45)
    at ReactDOMComponent.Mixin._createContentMarkup (base/spec/views/layout.js:12598:33)window.__karma__.result @ debug.html:37(anonymous function) @ adapter.js:98require.register.EventEmitter.emit @ mocha.js:616(anonymous function) @ adapter.js:73require.register.EventEmitter.emit @ mocha.js:611require.register.Runner.fail @ mocha.js:4797require.register.Runner.failHook @ mocha.js:4822(anonymous function) @ mocha.js:4863done @ mocha.js:4518require.register.Runnable.run @ mocha.js:4558next @ mocha.js:4855(anonymous function) @ mocha.js:4876timeslice @ mocha.js:6483
4

1 に答える 1

3

テスト時に必ずしもコンポーネントをモックする必要はありません。基本的に、コンポーネントをテストするときにコンポーネントを必要とするだけで、反応テストユーティリティを使用してDOMにレンダリングします。

たとえば、これがコンポーネントの場合:

// './lib/components/Checkbox.jsx'
var React = require('react');

module.exports = React.createClass({
  getInitialState: function() {
    return { isChecked: false };
  },

  onChange: function() {
    this.setState({ isChecked: !this.state.isChecked });
  },

  render: function() {
    return (
      <label>
        <input
          type="checkbox"
          checked={ this.state.isChecked }
          onChange={ this.onChange }
        />

        { this.state.isChecked ? this.props.labelOn : this.props.labelOff }
      </label>
    );
  }
});

テストは次のようになります。

// './test/Checkbox.js'
var React = require('react');
var ReactAddons = require('react/addons').addons;
var TestUtils = ReactAddons.TestUtils;
var expect = require('chai').expect;
var Checkbox = require('../lib/components/Checkbox');

describe('<Checkbox />', function() {
  before(function () {
    this.component = TestUtils.renderIntoDocument(
      <CheckboxWithLabel labelOn="on" labelOff="off" />
    );

    this.label = TestUtils.findRenderedDOMComponentWithTag(this.component, 'label');
    this.input = TestUtils.findRenderedDOMComponentWithTag(this.component, 'input');
  });

  it('component is rendered', function () {
    expect(this.component).to.exist;
  });

  it('component label text equals to "off" by default', function () {
    expect(this.label.getDOMNode().textContent).to.equal('Off');
  });

  it('component label text changes to "on" after click', function() {
    // Simulate change event.
    TestUtils.Simulate.change(input);

    expect(this.label.getDOMNode().textContent).toEqual('On');
  });
});

テストでは、例に示されている以上のことをアサートできます。たとえば、次のことができます。

  • propsコンポーネントに正しく渡されるアサート。
  • stateコンポーネントの初期化時に正しく設定されていることをアサートします。
  • state特定のアクションがトリガーされたときに正しく変化するアサート。
  • クラス名や ID が正しく設定されているかどうかをアサートします。
  • テキスト ノードの値をアサートします。

フラックスを使用している場合Action Creatorsは、コンポーネントから正しく呼び出されたかどうかをアサートすることもできます。

注意すべき唯一のことは、これのほとんどをテストするために DOM が必要になるということです。以下を使用してこれを解決できます。

個人的には、ノード v0.12.x では jest を実行できず、jsdom は v4.0.0 から io.js しかサポートしていないため、 mochify を使用しています。私はmochajsを使っていて、ブラウザ化することが多いので、mochify は私にぴったりです。

于 2015-08-12T17:58:05.287 に答える