web-dev-qa-db-ja.com

React / JestJS / Enzyme：ref関数をテストする方法は？

この非常に単純なコンポーネントrender()に対して、JestとEnzymeを使用して単体テストを実行しています：

render() {
  return (<Input
    id='foo'
    ref={input => { this.refInput = input }}
  />)
}

it('should render Input', () => {
  wrapper = shallow(<Component />)
  expect(wrapper.find(Input)).toHaveLength(1)
})

また、Jestのカバレッジオプションを使用しています。

ref={input => { this.refInput = input }}

私のテストではカバーされていません。このサンプルコンポーネントの完全な単体テストを取得するにはどうすればよいですか？

javascriptreactjsunit-testingjestjsenzyme
6
user3142695

Refはコンポーネントのインスタンスにアタッチされているため、コンポーネントのインスタンスを取得するには mount を使用する必要があります。

refをテストするには、次の行を追加します

expect(wrapper.instance().refInput).toBeTruthy();

最終結果：

render() {
  return (<Input
    id='foo'
    ref={input => { this.refInput = input }}
  />)
}

it('should render Input', () => {
  const wrapper = mount(<Component />);
  expect(wrapper.find(Input)).toHaveLength(1)
  expect(wrapper.instance().refInput).toBeTruthy();
})
8
Yangshun Tay