Нажатие на кнопку «ОК» щелкает после открытия модала

Question

Также адресовано здесь , у меня есть компонент нижнего колонтитула, для которого я пытаюсь написать тесты. Нижний колонтитул состоит из нескольких кнопок. Все эти кнопки используют константное сообщение, которое является модальным для 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]]

Как указано в документах jest, с использованием фиктивной функции , я увидел, что макет, который я объявил в верхней части теста, записывает все его вызовы. Позвонив по номеру msg.Message.mock.calls[0][1]();, который удерживал вызов, сделанный в первом тесте, я смог получить «okayClicked» модального окна и изменить состояние. Надеюсь, это кому-нибудь поможет!