如何模拟 React 组件单元测试的 request-promise-native？

Question

包：Jest、Enzyme 和 Nock，它们不起作用。

我有以下 React 组件：

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)。

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

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

你能指教一下吗？

Answer 1

根据this example from the docs，我认为您可能想要执行以下操作：

首先，在__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()。