如何在React中的类组件的实例方法中模拟fetch？

Question

我正在使用create-react-app，jest和酶。

我有一个类组件，在单击表行时加载“详细信息”数据，然后在模式中显示一个表单，可以编辑和保存详细信息：

import React, { Component } from "react";
import fetch from "isomorphic-fetch";
import Modal from "./Modal";

export default class RecordViewer extends Component {
  constructor(props) {
    super(props);
    this.state = {
        showModal: false,
        currentRecord: {}
    };
  }

  open(id) {
    fetch(`api/${id}`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          ...this.state,
          currentRecord: data.record,
          showModal: true
        });
      });
  }

  render() {
    <div>
      <Modal visible={this.state.showModal} contents={this.state.currentRecord} />
      <table>
        <tr onClick={()=>this.open(1)}>
          <td>Record Overview for Item 1</td>
        </tr>
      </table>
    </div>
  }
}

我想模拟fetch函数来确定它是否被调用，但也只是为了防止组件尝试访问API。 我想测试传递给模态的内容，例如。

将fetch作为prop进行传递会使这很容易，但是这个组件的父级需要知道它，这似乎没有意义。

有没有办法用这个设置模拟获取？

也许有更好的方法来完全测试这个？

Answer 1

实际上你应该创建一个“容器”组件来连接业务规则和“查看”ex;

src/components
  -> RecordViewer.js
  -> RecordViewerContainer.js

因此，在RecordViewer.js你可以像PURE组件那样只导出一个回调函数ex。

RecordViewer.js

import React, { Component } from "react";
import Modal from "./Modal";

class RecordViewer extends Component {
  render() {
    <div>
      <Modal visible={this.props.showModal}
       contents={this.props.currentRecord} />
      <table>
        <tr onClick={() => this.props.onOpen(1)}>
          <td>Record Overview for Item 1</td>
        </tr>
      </table>
    </div>
  }
}

RecordViewer.propTypes = {
  showModal: React.PropTypes.bool,
  onOpen: React.PropTypes.func,
  currentRecord: React.PropTypes.object
}

RecordViewer.defaultProps = {
  showModal: false,
  currentRecord: {},
  onOpen: function(){}
}

export default RecordViewer;

RecordViewerContainer.js

import React, { Component } from "react";
import fetch from "isomorphic-fetch";
import RecordViewer from "./RecordViewer";

export default class RecordViewerContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
        showModal: false,
        currentRecord: {}
    };
  }

  open(id) {
    fetch(`api/${id}`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          ...this.state,
          currentRecord: data.record,
          showModal: true
        });
      });
  }

  render() {
    <RecordViewer currentRecord={this.state.currentRecord} showModal={this.state.showModal} />
  }
}

然后，您可以模拟组件参数并分离API调用和业务规则。

提示：我们有更好的工具，如redux ， altjs ， reflux （焊剂实施）。

Answer 2

有一种方法，但它并不理想。 看看fetch-mock包。

它不理想的原因是你不会完全隔离你的组件，所以在技术上它不再是单元测试，但你没有指定你正在编写什么样的测试。