0

包：Jest，Enzyme，（和 Nock 不起作用）。

我有以下反应组件：

import ...

const request = require('request-promise-native');

class SomeSearchContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      ...
    };
  };

  onResponse = (response) => {
    const { var1, var2 } = response;
    if (var1) {
      this.setState(...)
    }
  };

  onSubmit = (event) => {
    const someId = this.props.someId;
    if (someId.length === 4) {
      request(
        {
          uri: `${location.href}api/${someId}`,
          json: true,
        }).then(this.onResponse)
        .catch(this.props.onResponseError);
    } else {
      this.setState(...)
    }
  };

  render() {
    return (
      <button id="btn-search" onClick={this.onSubmit}>Search</button>
    );
  }
}

export default SomeSearchContainer;

我正在尝试为此实施单元测试，因此我想模拟 request-promise-native 并且assert阶段已根据结果（onResponse）相应地更改。

理想情况下，我想浅渲染组件，模拟单击事件并断言状态已更改（相应地）。

我尝试了各种方法，但要么我的测试没有等待请​​求返回，要么我没有真正模拟请求。

您能否提一些建议 ？

4

1 回答 1

0

根据文档中的这个示例，我认为您可能想要执行以下操作：

首先，创建一个文件，__mocks__/request-promise-native.js该文件将模拟您的请求将返回的一些示例数据。这看起来像：

// __mocks__/request-promise-native.js

const rpn = jest.genMockFromModule('request-promise-native');

const request = opts => new Promise((resolve, reject) => {
  resolve(`{
    var1: true,
    var2: "foo"
  }`);
});

rpn.request = request;

module.exports = rpn;

请注意，该__mocks__文件夹需要进入项目的根目录，与node_modules.

然后，您可以像编写任何其他 React 组件一样编写和运行测试。当测试执行到达它通常使用request-promise-native库的部分时，您的模拟版本将自动被交换，并且该response变量将获得您在模拟中设置的任何 JSON 值。

如果您想要更复杂的行为，请参阅上面的文档，例如，如果您还想测试reject()案例。在这种情况下，您可能希望从opts参数中传递的任何内容中分支出来，以选择是执行resolve()还是reject().

于 2018-02-18T00:30:49.663 回答