首页 文章

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

提问于
浏览 次
0

包装：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;

我正在尝试为此实现单元测试，因此我想模拟请求 - promise-native和 assert ，该阶段已根据结果（ onResponse ）进行相应更改 .

Ideally I would like to shallow render the component, simulate a click event and assert that the state is changed (accordingly).

我尝试过各种各样的方法但是我的测试没有等待回来的请求，或者我没有实际模拟请求 .

您能否提一些建议 ？

reactjs unit-testing mocking jest request-promise

1 回答

  • 0

    每this example from the docs，我 think 你可能想做类似的事情：

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

    回复于

相关问题