javascript - 回流事件未触发

Question

我正在使用 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 文档中的完全一样。

另外，顺便说一句，有没有比到处抛出一堆 console.log() 调用更好的方法让我在 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");
  });
});

Answer 1

事实证明，我遇到了两个问题。第一个是 reflux 被自动模拟。第二个与 Action 和计时器有关，我找到了解决方案 here.

我还是要发布我的代码:

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