测试是否调用了const模态组件 [英] Testing if a const modal component is called

问题描述

我有一个页脚组件，上面有几个按钮.所有这些按钮都使用Message常量，它是一个antd模式:

I have a footer component which has several buttons on it. All of these buttons use the Message const, which is an antd modal :

Message.jsx

import { Modal } from 'antd';

const { confirm } = Modal;

export const Message = (text, okayHandler, cancelHandler) => {
  confirm({
    title: text,
    okText: 'Yes',
    cancelText: 'No',
    onOk: okayHandler,
    onCancel: cancelHandler,
  });
};

export default Message;

Footer.jsx

class Footer extends Component {
  state = {
    from: null,
    redirectToReferrer: false,
  };

  cancelClicked = () => {
    Message('Return to the previous screen?', () => {
      this.setState({ redirectToReferrer: true, from: '/home' });
    });
  };

render() {
    const { redirectToReferrer, from } = this.state;

    if (redirectToReferrer) {
      return <Redirect to={{ pathname: from }} />;
    }
    return (
      <Card style={footerSyles}>
        <Button
          bounds={`${(3 * width) / 7 + (7 * width) / 84},5,${width / 7},30`}
          text="CANCEL"
          type="primary"
          icon="close"
          actionPerformed={this.cancelClicked}
        />
</Card>
//actionPerformed is actually onClick, it's taken as a prop from my <Button /> component. Card is an antd component while button is not.

我只想测试单击 Button 的时间，调用 cancelClicked 的时间.如果可能的话，我想测试当在Modal上单击确定"按钮时状态是否正确更改.我的测试如下，但是测试失败，因为未调用函数:

I simply want to test when the Button is clicked, cancelClicked is called. If possible, I want to test if the state changes properly when 'OK' button is clicked on the Modal. My test is as follows, but the test fails because function is not called :

Footer.test

const defaultFooter = shallow(<Footer position="relative" bounds="10,0,775,100" />);

test('Footer should open a popup when cancel button is clicked, and redirect to home page', () => {
  const instance = defaultFooter.instance();
  const spy = jest.spyOn(instance, 'cancelClicked');
  instance.forceUpdate();
  const p = defaultFooter.find('Button[text="CANCEL"]');
  p.simulate('click');
  expect(spy).toHaveBeenCalled();
});

我也尝试过使用mount而不是浅表，但是间谍仍然没有被召唤.

I've also tried with mount rather than shallow, but the spy is still not called.

推荐答案

simulate的常见问题"部分表示:尽管名称暗示这将模拟实际事件，但.simulate()实际上会根据您提供的事件将组件的prop作为目标.例如，.simulate('click')实际上会得到onClick道具并调用它."

The "Common Gotchas" section for simulate says that "even though the name would imply this simulates an actual event, .simulate() will in fact target the component's prop based on the event you give it. For example, .simulate('click') will actually get the onClick prop and call it."

可以在Enzyme源代码因此，行p.simulate('click');最终试图调用Button的onClick道具，该道具不存在，因此实际上什么也没做.

So the line p.simulate('click'); ends up trying to call the onClick prop of the Button which doesn't exist so it essentially does nothing.

这篇帖子建议直接调用道具，然后避免simulate.

This post from an Airbnb dev recommends invoking props directly and avoiding simulate.

在这种情况下，您可以像这样直接调用actionPerformed属性:

In this case you would call the actionPerformed property directly like this:

p.props().actionPerformed();

这篇关于测试是否调用了const模态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！