如何在Jest中监视默认的prop函数

时间:2019-10-04 17:34:49

标签: reactjs jestjs enzyme

我正在尝试测试默认的prop,它是一种函数类型,但是不确定如何用Jest嘲笑或暗中监视:

尝试以下测试:

it("should call default toggle function prop on click of footer button", () => {
            const wrapper = shallow(
                <InfoModal
                    isOpen={true}
                    message="Primary message"
                    secondaryMessage="Secondary message"
                />
            );
            const footerButton = wrapper.find("ModalFooter Button");
            const fn = jest.spyOn(wrapper.props(), "toggle");
            footerButton.simulate("click");
            wrapper.update();
            expect(fn).toHaveBeenCalled();
        });

它说 TypeError:无法分配为只读对象'[object Object]'的属性'toggle',其中toggle是InfoModal的默认属性。

我们如何测试已设置为默认值而非用户定义的功能道具。

1 个答案:

答案 0 :(得分:2)

您可以访问defaultProps之类的静态道具;

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

App.defaultProps = {
  check: () => console.log('i am working')
}

App.defaultProps.check()

编辑:

您可以这样监视;

const spy = jest.spyOn(App.defaultProps, 'check');
const RenderedApp = shallow(<App />);
RenderedApp.simulate('click');
expect(spy).toHaveBeenCalled();

因此更改此行

const fn = jest.spyOn(wrapper.props(), "toggle");

收件人

const fn = jest.spyOn(wrapper.defaultProps, "toggle");

将为您解决问题。

https://codesandbox.io/s/zen-morning-881ny