1

Reflux を使用して React アプリを開発していますが、ストアをコンポーネントに接続する際に問題が発生しています。

これがコードです

// src/stores/post.js
var Reflux = require('reflux');
var $ = require('jquery');
var PostActions = require('../actions/post');

module.exports = Reflux.createStore({
  init: function() {
    this.listenTo(PostActions.vote, this.onVote);
  },

  getInitialData: function() {
    return {
      title: "Post 1",
      content: "This is a post!",
      voteCount: 6
    }
  },

  onVote: function(postId, studentId, voteValue) {
    this.trigger();
    console.log("VOTE ACTION TRIGGERED");
  }
});

// src/actions/post.js
var Reflux = require('reflux');

module.exports = Reflux.createActions([
  "vote"
]);

// src/components/posts/upvote.js
var React = require('react');
var Reflux = require('reflux');
var PostStore = require('../../stores/post');
var PostActions = require('../../actions/post');

module.exports = React.createClass({
  mixins: [Reflux.ListenerMixin],

  getInitialState: function() {
    return {
      voteCount: this.props.votes
    }
  },

  componentDidMount: function() {
    this.listenTo(PostStore, this.onVoteCountChange);
  },

  componentWillUnmount: function() {
    this.unsubscribe();
  },

  onVoteCountChange: function(newVoteCount) {
    this.setState({
      voteCount: newVoteCount
    });
  },

  handleClick: function() {
    console.log(PostActions);
    PostActions.vote(
      null, null, null
    );
  },

  render: function() {
    return (
      <div className="votes">
        <p>{this.state.voteCount}</p>

        <span className="glyphicon glyphicon-chevron-up"
          onClick={this.handleClick}></span>
      </div>
    )
  }
});

問題は、Node コンソールで実行するとコードが機能することです。

> var PostStore = require('./src/stores/post');
undefined
> var PostActions = require('./src/actions/post');
undefined
> PostActions.vote(null, null, null);
undefined
> VOTE ACTION TRIGGERED

しかし、テストを実行すると、イベントがログに記録されません。handleClick()ただし、が呼び出され、PostActionsオブジェクトがコンソールに出力されているため、クリックが発生していることはわかっています。

PostStore も初期化されています (確認のために console.log() がありました)。これにより、どういうわけか問題は React コンポーネントにあると思われますが、私が知る限り、コードは Reflux ドキュメントにあるものとまったく同じように見えます。

また、余談ですが、Jest テスト中にコードをデバッグするためのより良い方法はありますか? Rubyのbinding.pryのようなもの？

編集:私はテストを含めています:

jest.dontMock('../../../src/components/posts/upvote');
jest.dontMock('../../../src/actions/post.js');
jest.dontMock('../../../src/stores/post.js');

describe('Upvote', function() {
  var React = require('react/addons');
  var Upvote = require('../../../src/components/posts/upvote');
  var TestUtils = React.addons.TestUtils;
  var upvote;

  beforeEach(function() {
    upvote = TestUtils.renderIntoDocument(
      <Upvote postId="1" votes="6"/>
    );
  });

  it('should display the correct upvote count', function() {
    var votes = TestUtils.findRenderedDOMComponentWithTag(
      upvote, "p"
    ).getDOMNode().textContent;

    expect(votes).toEqual("6");
  });

  it('should handle upvote clicks', function() {
    var upArrow = TestUtils.findRenderedDOMComponentWithTag(
      upvote, "span"
    ).getDOMNode();

    TestUtils.Simulate.click(upArrow);

    // var votes = TestUtils.findRenderedDOMComponentWithTag(
    //   upvote, "p"
    // ).getDOMNode().textContent;

    // expect(votes).toEqual("7");
  });
});
4

1 に答える 1

2

結局のところ、私には2つの問題がありました。最初のものは、reflux自動的に嘲笑されていました。2 つ目はアクションとタイマーに関するもので、ここで解決策を見つけました。

とにかくコードを投稿します：

// gulpfile.js

// the config is used for gulp-jest
var jestConfig = {
  "scriptPreprocessor": "./helpers/jsx-preprocessor.js", // relative to gulp.src
  "unmockedModulePathPatterns": [
    "../node_modules/react",
    "../node_modules/reflux" // this is where reflux gets unmocked
  ]
}

// __tests__/upvote.js

it('should handle upvote clicks', function() {
  var upArrow = TestUtils.findRenderedDOMComponentWithTag(
    upvote, "span"
  ).getDOMNode();

  TestUtils.Simulate.click(upArrow);

  jest.runAllTimers(); // this is where the magic happens

  var votes = TestUtils.findRenderedDOMComponentWithTag(
    upvote, "p"
  ).getDOMNode().textContent;

  expect(votes).toEqual("7");
});
于 2015-02-14T14:13:24.430 に答える