Sinon.spy() & jest.spyOn - TypeError： 试图将未定义的属性 getTableData 包装为函数

Question

我试图使用jest "spyOn"或sinon "spy"来监视"getTableData"方法或任何其他类组件方法。一直得到：

Cannot spy the getTableData property because it is not a function; undefined given instead与开玩笑的间谍和

TypeError: Attempted to wrap undefined property getTableData as function与西农间谍。

此外，该方法Im测试的组件由使用redux连接的hoc组件包装。然后我尝试在没有 HOC 的情况下导出它，但测试仍然无法处理相同的错误

请注意，const spy = jest.spyOn(wrapper.instance(), "getTableData");仅在没有 HOC 的情况下导出组件时才能正常工作！

我已经尝试过的：

const spy = sinon.spy(MonthlyProjectPlan.prototype, 'getTableData');
//const spy = jest.spyOn(MonthlyProjectPlan.prototype, 'getTableData');
    const wrapper = mount(
      //<Provider store={store}>
            <MonthlyProjectPlan {...propsPanel} />
      //</Provider>
    );

export class MonthlyProjectPlan extends React.Component {
  groupBy = (list, keyGetter) => {
    //some secret magic
  };
  getTableData = () => {
    let result = [];
    if (this.props.data) {
      let groupedData = this.groupBy(this.props.data, item => item.commodity);
      // magic
    }
    return result
  };
  getTableColumns = () => {
    let tableData = this.getTableData();
    let columns = [
      {Header: 'Commodities', accessor: 'commodity', width: 300}
    ];
    if (tableData.length > 0) {
      let months = tableData[0].data.map(item => item.year_month_date);
      let monthsColumns = months.map((item, key) => {
        //magic
      });
      columns.push(...monthsColumns)
    }
    return columns
  };
  render() {
    if (!this.props.data)
      return (<LoadingBar/>);
    if (this.props.data.length < 1)
      return (<NoData/>);
    return (
      <div>
        <ReactTable data={this.getTableData()}
                    className="monthly-pipeline__table"
                    columns={this.getTableColumns()}
                    defaultSorted={[{id: "commodity", desc: false}]}
                    showPageSizeOptions={false}
                    showPagination={false}
                    minRows={false}/>
        <div className="monthly-pipeline-help">
          <div className="monthly-pipeline-help__title">
            Monthly Pipeline Shortfalls Percent
          </div>
          <table className="monthly-pipeline-help__table">
            <tbody>
            <tr>
              <td style={{backgroundColor: colors.darkGreen}}>0% - 25%</td>
              <td style={{backgroundColor: colors.yellow}}>26% - 50%</td>
              <td style={{backgroundColor: colors.orange}}>51% - 75%</td>
              <td style={{backgroundColor: colors.red}}>76% - 100%</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    )
  }
}
export default Panel(MonthlyProjectPlan)

下面的测试不起作用

it("should render MonthlyProjectPlan Global component correctly", () => {
    const spy = sinon.spy(MonthlyProjectPlan.prototype, 'getTableData');
    //const spy = jest.spyOn(MonthlyProjectPlan.prototype, 'getTableData');
    const wrapper = mount(
      //<Provider store={store}>
      <MonthlyProjectPlan {...propsPanel} />
      //</Provider>
    );

错误：

"无法监视 getTableData 属性，因为它不是一个函数;未定义给出相反"与开玩笑的间谍

和

"TypeError： Raw 试图将未定义的属性 getTableData 包装为函数"与 sinon spy。

这工作正常，但仅适用于导出没有 HOC 的组件

  it("should render MonthlyProjectPlan Global component correctly", () => {
    const wrapper = mount(
      //<Provider store={store}>
      <MonthlyProjectPlan {...propsPanel} />
      //</Provider>
    );
    // const spy = jest.spyOn(wrapper.instance(), "getTableData");
    // wrapper.instance().forceUpdate();
    // expect(spy).toHaveBeenCalled();
    // expect(spy.mock.calls.length).toBe(5);

Answer 1

您正在将 getTableData 方法定义为类属性。因此，该方法未在原型中定义。相反，它是您创建的实例的属性。

这意味着代码(您提供的代码的简化版本(：

export class MonthlyProjectPlan {
    getTableData = () => {
        let result = [];
        if (this.props.data) {
            let groupedData = this.groupBy(this.props.data, item => item.commodity);
            // magic
        }
        return result
    };
    render() {
    }
}

与以下相同：

function MonthlyProjectPlan() {
    this.getTableData = function() {
        let result = [];
        if (this.props.data) {
            let groupedData = this.groupBy(this.props.data, item => item.commodity);
            // magic
        }
        return result
    };
}
MonthlyProjectPlan.prototype.render = function() {};

请注意，getTableData 方法不是在 MonthlyProjectPlan 类的原型中定义的，而是在您创建的类的每个实例上创建一个新方法。

因此，MonthlyProjectPlan.prototype.getTableData是未定义的，您无法监视它。