Reactjs 测试是否调用常量模态组件

我有一个页脚组件，上面有几个按钮。所有这些按钮都使用

消息

常量，这是一种antd模式：

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;

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.

Footer.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;

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.

类页脚扩展组件{
状态={
from:null，
转发者：错，
};
取消单击=（）=>{
消息（'返回上一屏幕？'，（）=>{
this.setState（{redirectoreFerrer:true，from:'/home'}）；
});
};
render（）{
const{redirectToReferrer，from}=this.state；
if（重定向转发器）{
返回；
}
返回(
//actionPerformed实际上是onClick，它是我的组件中的一个道具。卡是一个antd组件，而按钮不是。

我只想测试单击按钮时调用取消单击。如果可能，我想测试在模式上单击“确定”按钮时状态是否正确更改。我的测试如下，但测试失败，因为未调用函数：

页脚测试

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();
});

constdefaultfooter=shallow（）；
测试（'单击“取消”按钮时，页脚应打开一个弹出窗口，并重定向到主页'，（）=>{
const instance=defaultFooter.instance（）；
const spy=jest.spyOn（实例'cancelClicked'）；
forceUpdate（）；
const p=defaultFooter.find（'Button[text=“CANCEL”]”）；
p、 模拟（“点击”）；
期望（间谍）。已被调用（）；
});

我也尝试使用mount而不是shallow，但是spy仍然没有被调用。

说“即使名称暗示这模拟了一个实际事件，.simulate（）实际上会根据您给它的事件以组件的道具为目标。例如，.simulate（'click'）实际上会获得onClick道具并调用它。”

这种行为可以在

Enzyme

源代码和代码中看到

因此，行

p.simulate（'click'）；

最后尝试调用

按钮的
onClick
属性，该属性不存在，因此它实际上什么也不做

来自Airbnb的开发人员建议直接调用道具并避免
simulate

在这种情况下，您可以直接调用
actionPerformed
属性，如下所示：

p.props（）.actionPerformed（）；
按钮的
组件从哪里来？它不是本地的
可能需要用
onClick
替换
actionPerformed
。