javascript - 使用preventDefault的React/Unit Test(Jest)click方法

所以我遇到了一个小问题...

我有一个Link组件，如果满足特定条件，它将通过to道具转到特定路线。如果不满足该条件，则单击该链接后，它将执行其他操作（以我为例，启动自定义模式）。

我有一个绑定到onClick组件上Link处理程序的类方法

// Card.jsx

import Link from 'components/Link';

...

static props = {
  condition: PropTypes.bool
};

constructor(props) {
  this.state = {
    showModal: false
  };
}

...

goToUrlOrLaunchModal() {
  return (
    <Link
      to="www.google.com"
      onClick={this.handleClick}
    />
  );
}


...


handleClick(e) {
  const { condition } = this.props;

  if (!condition) {
    e.preventDefault();

    this.setState({
      showModal: true
    });
  }
}

我的问题是单元测试。我有一个单元测试，用于在condition为false时单击链接

// Card.test.js

...

import renderer from 'react-test-renderer';

...

const event = {
  preventDefault: jest.fn()
};

const component = renderer.create(<Card>).getInstance();

instance.handleClick(event);
expect(event.preventDefault).toHaveBeenCalled();
expect(instance.state.showModal).toBe(true);

我迷路的地方是测试另一端-当condition为true时，我不需要调用preventDefault或在那之后执行任何逻辑。我不需要handleClick中的任何内容来触发。 handleClick中的唯一逻辑是condition为false时的。

单击Link组件时转到路线的逻辑很好，这只是condition为true时的单元测试。

我需要测试尚未调用preventDefault，并且将instance.state.showModal设为true，但是我很困惑。我一直认为这是必须要做的，但无法超越它……

const event = {
  preventDefault: jest.fn()
};

expect(instance.handleManageClick).not.toHaveBeenCalled();
expect(event.preventDefault).not.toHaveBeenCalled();
expect(instance.state.showModal).toBe(false);

如果有人有任何指导，将不胜感激！谢谢！

最佳答案

我得到了答案，这要感谢Andrew的帮助，他在第一篇文章中发表了评论。

这是我所做的：

// Card.test.js

const event = {
  preventDefault: jest.fn()
};

const component = renderer.create(<Card>).getInstance();

const spy = jest.spyOn(instance, 'handleManageClick');

expect(spy).not.toHaveBeenCalled();
expect(event.preventDefault).not.toHaveBeenCalled();
expect(instance.state.showModal).toBe(false);

谢谢你的帮助！

关于javascript - 使用preventDefault的React/Unit Test(Jest)click方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57696294/