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

问题描述

我有一个页脚组件，上面有几个按钮.所有这些按钮都使用 Message const，这是一个 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 被调用.如果可能，我想测试在模态上单击确定"按钮时状态是否正确更改.我的测试如下，但测试失败，因为没有调用函数:

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 而不是shallow，但仍然没有调用 spy.

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

推荐答案

模拟的常见问题"部分 说即使名称暗示这是模拟实际事件，.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 源代码中看到 这里 和这里.

That behavior can be seen in the Enzyme source code here and here.

所以行 p.simulate('click'); 最终试图调用 Button 的 onClick 道具，它不会't 存在，所以它基本上什么都不做.

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.

这篇博文 来自 Airbnb 开发人员建议直接调用 props避免模拟.

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屋！