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>
    )
  }
});

问题是，当我在节点控制台中运行代码时，它可以工作：

> 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 测试期间，有没有比在各处抛出一堆 console.log() 调用更好的方法来调试我的代码？像红宝石中的 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

事实证明，我有两个问题。第一个是reflux被自动嘲笑的。第二个与动作和计时器有关，我在这里找到了解决方案。

无论如何我都会发布我的代码：

// 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 回答