React / Unit Test (Jest) 单击方法与 preventDefault

Question

所以我遇到了一个让我很困惑的小问题...

我有一个 Link 组件，如果满足特定条件，它将通过 to 道具转到特定路线。如果不满足该条件，则 link 在单击时会执行其他操作（在我的例子中启动自定义模式）。

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

// 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

时，我有一个单击 link 的单元测试

// 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 为假时。

点击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);

如果有人能指导一下，将不胜感激！谢谢！

Answer 1

感谢 Andrew 的帮助，他对最初的 post 发表了评论。

这是我所做的：

// 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);

感谢您的帮助！

React / Unit Test (Jest) 单击方法与 preventDefault

React / Unit Test (Jest) click method with preventDefault

javascript

unit-testing

reactjs

react-test-renderer