Question

我正在试图弄清楚当通过挂载上的ajax加载初始数据时如何测试react组件。

var ResourceList = React.createClass({
  componentDidMount: function() {
    api.fetchResources(this.props.type).then(function(raw) {
        console.log(raw);
      this.setState({
        resources: raw
      });
    }.bind(this));
  },

  getInitialState: function() {
    return {
      resources: []
    };
  },

  render: function() {
    var resources = this.state.resources.map(function(resource, index) {
      return (
        <Resource raw={resource} key={index}/>
      );
    });

    return (
      <ul>{resources}</ul>
    );
  }
});

componentDidMount函数调用返回jquery promise的API。

var fetchResources = function(type) {
  var endpoint = '/resources';

  return $.ajax({
    url: base + endpoint + '/' + type,
    dataType: 'json',
    headers: headers
  });
}

// Return promise
module.exports = {
  fetchResources: fetchResources
};

我的测试代码如下：

describe('something', function() {
  beforeEach(function() {
    React = require('react/addons');
    TestUtils = React.addons.TestUtils;
    ResourceListComponent = require('../app/components/resource-list');

    ResourceList = TestUtils.renderIntoDocument(<ResourceListComponent />);

    // Dummy data from server
    resources = [{
      author: 'author',
      body: 'body'
    }];

    // Add the dummy data from the server
    ResourceList.setState({
      resources: resources
    });
  });


  it('1', function() {
    expect(ResourceList.state.resources.length).toBe(1);
  });
});

我得到的错误是：“TypeError：无法调用方法'然后'未定义'，这是可以理解的，但我怎么能纠正这个？

Answer 1

如果您还没有（如果您在查看粘贴的代码时没有显示，那么您需要添加以下两行中的任何一行。）

jest.dontMock('../app/components/resource-list');

或

jest.dontMock('../path/to/your/apiclient');

默认情况下，Jest会模拟所有必需的模块依赖项，这将使您的API客户端始终为所有被调用的方法返回undefined。

其次，我想推动您使用API处理程序的实际实现，并使用像nock之类的模块来模拟HTTP调用。 nock返回的作用域将拦截所有HTTP调用并让你对响应产生期望，因此在安装组件时，你可以让nock实际返回有效数据并期望一切正常。

使用Jest测试React Component Mount

1 个答案: