Тестирование, если вызван const модальный компонент - PullRequest
Новая
       22

Тестирование, если вызван const модальный компонент

0 голосов
/ 14 ноября 2018

У меня есть компонент нижнего колонтитула, на котором есть несколько кнопок. Все эти кнопки используют константу Message, которая является модальным для 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;

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.

Я просто хочу проверить, когда нажата кнопка , вызывается cancelClicked . Если возможно, я хочу проверить, правильно ли изменяется состояние при нажатии кнопки «ОК» на модале. Мой тест выглядит следующим образом, но тест не пройден, потому что функция не вызывается:

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

Я также пытался использовать маунт, а не мелкий, но шпион до сих пор не вызван.

1 Ответ

0 голосов
/ 15 ноября 2018

В разделе «Common Gotchas» для simulate говорится, что «хотя имя подразумевает, что это имитирует фактическое событие, .simulate () будет на самом деле нацеливаться на опору компонента на основе события, которое вы например, .simulate ('click') фактически получит реквизит onClick и вызовет его. "

Такое поведение можно увидеть в исходном коде Enzyme здесь и здесь .

Таким образом, строка p.simulate('click'); заканчивается попыткой вызвать onClick опору Button, которой не существует, поэтому она по сути ничего не делает.

Этот пост от разработчика Airbnb рекомендует напрямую вызывать реквизит и избегать simulate.

В этом случае вы бы напрямую вызвали свойство actionPerformed следующим образом: 

p.props().actionPerformed();
...