Sinon.spy () & jest.spyOn - TypeError: Попытка обернуть неопределенное свойство getTableData в функцию

Question

Я пытаюсь шпионить за методом "getTableData" или любым другим методом компонента класса, используя jest "spyOn" или sinon "spy". Все время получаю:

Cannot spy the getTableData property because it is not a function; undefined given instead с шуткой и

TypeError: Attempted to wrap undefined property getTableData as function с шпионом Шиноном.

Также компонент, метод которого я тестирую, обернут компонентом HOC, который использует redux connect. Затем я попытался экспортировать его без 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, потому что оно не является функцией; вместо него задано неопределенное значение" с помощью jest spyOn

и

«TypeError: Попытка обернуть неопределенное свойство 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() {

    }
}

- это то же самоеas:

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 не определен, и вы не можете его шпионить.