javascript - 用 Jest 测试 React 组件挂载

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:无法调用未定义的方法‘then’”，这是可以理解的，但我该如何更正此错误？

Answer 1

如果您还没有(在查看粘贴的代码时不会显示您是否正在执行此操作)，那么您需要添加以下两行中的任何一行。

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

或

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

Jest 默认模拟所有必需的模块依赖关系，这将使您的 API 客户端始终为调用的任何方法返回 undefined。

其次，我想插入您使用 API 处理程序的实际实现并模拟 HTTP 调用，而不是使用像 nock 这样的模块。 .nock 返回的范围将拦截所有 HTTP 调用并让您对响应做出预期，因此在安装组件时您可以让 nock 实际上返回有效数据并期望一切正常。