0

だから私は困惑している小さな問題を抱えています...

特定の条件が満たされた場合、小道具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唯一のロジックは、 falsehandleClickの場合です。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);

誰かが何らかのガイダンスを持っていれば、非常に感謝しています! ありがとうございました！

4

1 に答える 1