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文档中的内容完全相同。

另外，顺便说一句，在Jest测试期间，我是否有更好的方法来调试我的代码，而不是到处抛出一堆console.log（）调用？有点像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被自动嘲笑。第二个与行动和计时器有关，我找到了解决方案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");
});

回流事件不会触发

1 个答案: