Question

也已解决here，我有一个页脚组件，我正在尝试为其编写测试。页脚由几个按钮组成。所有这些按钮都使用Message const，它是一个antd模式：

编辑：我仍然陷在这个问题上。我已经设法用ReactTestUtils和酶固定法解决了这个问题，但是感觉就像我深入DOM并寻找不使用TestUtils的方法一样。

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}>
        <MyButton
          bounds={`${(3 * width) / 7 + (7 * width) / 84},5,${width / 7},30`}
          text="CANCEL"
          type="primary"
          icon="close"
          actionPerformed={this.cancelClicked}
        />
</Card>

actionPerformed实际上是onClick，它作为我组件的道具。卡是一个蚂蚁组件。

我可以测试在非常精细地单击按钮后是否调用 cancelClicked 。我想测试，在调用 cancelClicked 后，模式/消息已打开，当我单击“是”（onOk）时，状态已更改。我只想测试状态是否正确更改，尝试进行模拟和回调，但无法做到这一点。我尝试遵循一种方法，该方法只在消息模拟中调用okayHandler函数。

Footer.test

    //This test works

    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('MyButton[text="CANCEL"]');
      p.props().actionPerformed();
      expect(spy).toHaveBeenCalled();
    });

    //This doesn't, where I'm trying to make 'yes' clicked or 'OkayHandler' in Message called to change the state everytime modal opens



    test('Footer should open a popup when cancel button is clicked, and redirect to home page', () => {
         jest.mock('../../utils/uiModals', () => ({
    Message: (text, okayHandler) => okayHandler(),
  }));
  const instance = defaultFooter.instance();
  instance.cancelClicked();
  expect(defaultFooter.state().from).toEqual('/home');

任何帮助将不胜感激，我长期以来一直在解决该问题。

Answer 1

我终于弄清楚了如何通过模拟来做到这一点，而浅浅的渲染就足以解决这个问题了：）

Footer.test

jest.mock('../../utils/uiModals');

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

/*eslint-disable*/

test('Footer should open a popup when cancel button is clicked', () => {
      const instance = defaultFooter.instance();
      const spy = jest.spyOn(instance, 'cancelClicked');
      instance.forceUpdate();
      const p = defaultFooter.find('MyButton[text="CANCEL"]');
      p.props().actionPerformed();
      expect(spy).toHaveBeenCalled();
    });

//works! yay

test('Footer should open a popup when cancel button is clicked, and redirect to home page', () => {
  const msg = require('../../utils/uiModals');
  msg.Message.mock.calls[0][1]();
  expect(defaultFooter.state().redirectToReferrer).toBeTruthy();
});

我想到的是，当我尝试以期望的方式调用msg.Message.mock时，它给出了错误并收到了一个对象，例如：

Received:
      object: {"calls": [["Return to the previous screen?", [Function anonymous]]

如玩笑的文档using a mock function中所述，我看到我在测试顶部声明的模拟程序正在记录所有调用。通过调用msg.Message.mock.calls[0][1]();来保持第一次测试中的调用，我能够获得模态的“ okayClicked”并更改状态。希望这对某人有帮助！

模态打开后，单击onOk按钮

1 个答案: