如何測試回調單擊從父組件傳遞的子組件？

Question

我有以下父組件：

import React, { Fragment } from 'react';

export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }

  onClick = () => {
    // working
  }

  render() {

    return (
      <Fragment>
        <Child handleClick={this.onClick} />
      </Fragment>
    );
  }
}

我需要檢查子組件中是否觸發了回調，父組件中的onClick方法是否將被觸發。 我寫了這樣的測試：

test("check callback fire", () => {
    let mockFn = jest.fn();
    Parent.prototype.onClick = mockFn;

    let wrapper = shallow(<Parent />);

    wrapper.find('Child').props().handleClick();

    expect(mockFn).toHaveBeenCalled();
  });

我有一個錯誤

 Expected mock function to have been called, but it was not called.

我該如何用笑話和酵素正確地做到這一點？ 可能嗎？

Answer 1

您的onClick函數位於對象本身而不是原型上。 您必須修改對象實例。

let mockFn = jest.fn();
let wrapper = shallow(<Parent />);
wrapper.find('Child').props().handleClick = mockFn; 
wrapper.find('Child').props().handleClick(); 
expect(mockFn).toHaveBeenCalled();

話雖如此，您是自己調用onClick，因此測試它是否被調用沒有意義。

您應該測試其效果，例如，部分DOM未顯示。

您還可以測試它們組件的狀態是否正確更新，即{show：false}

Answer 2

問題來自onClick方法的聲明，如果您這樣聲明函數

onClick() {}

代替

onClick = () => {}

您的測試應該可以進行，因為onClick將出現在Parent.prototype對象中，請注意， onClick方法中的this關鍵字將不再引用類實例。

如果您需要使用箭頭功能（以獲取this的正確值），則可以修改測試：

test("check callback fire", () => {
  let mockFn = jest.fn();

  let wrapper = shallow(<Parent />);
  wrapper.instance().onClick = mockFn;

  wrapper.find('Child').props().handleClick();

  expect(mockFn).toHaveBeenCalled();
});

在Parent類中使用onClick = () => {}不會將屬性添加到Parent.prototype ，實際上，它將聲明一個實例變量，如下所示：

class Parent {
  constructor() {
    super();
    this.onClick = () => {}
  }
}

順便說一句，您的render方法中存在Fragment似乎沒有用，您可以將其刪除

render() {
  return <Child handleClick={this.onClick} />;
}

Answer 3

我建議通過兩個測試來做到這一點：

1. 適當時將調用斷言其onClick道具的Child組件的單元測試。
2. 對Parent級進行單元測試，以使其在渲染時正確設置其Child的onClick道具。

通過這兩個測試，如果其中任何一個失敗，您都會收到警報。