web-dev-qa-db-ja.com

酵素でreact-routerリンクをテストする方法は？

これに似た質問がかなりたくさんありますが、どれも非常に時代遅れであるか、非常に複雑に見えます。

Reactコンポーネントを含むReact Router Linkコンポーネントは、次のようになります。

export default class Home extends Component {                                      
  render() {                                                                       
    return (                                                                       
      <div className="Home">  
        <Link to="/mission">Begin</Link>                                           
      </div>                                              
    );                                                                             
  }                                                                                
}

次に、Jestを使用して、Homeコンポーネントにto=/missionプロパティを持つLinkコンポーネントが含まれていることを非常に簡単にテストしようとしています。したがって、 Testing React Router docs のように、さまざまなテストを試しましたが、このコードは、私が達成しようとしていることを最も簡潔に示しています（使用例- jest-enzyme 簡潔にするため）：

it('includes link to Mission scene', () => {                                       
  const home = shallow(<MemoryRouter><Home /></MemoryRouter>);                                                              
  expect(home).toContainReact(<Link to="/mission">Begin</Link>)                    
});

明らかに、そのコードにはいくつかの問題がありますが、その中でも特にエラーがあります。

Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.

ただし、重要な点に注意してください。コンポーネントを個別にテストするために、（可能であれば）Homeコンポーネントをshallowレンダリングしたいと思います。同時に、それをMemoryRouterでラップするか、Linkコンポーネントをテストできるようにコンテキストを適切に配置しようとしています。

賢明な潜在的な回答者は、この問題が実際にそのコンポーネントのすべての分離されたテストを妨げることに気付くでしょう（Reactルーター）、コンポーネントを浅くレンダリングできないためです。

reactjsunit-testingtestingreact-routerenzyme
7
fildred13

Enzymeの find メソッドを使用できます：

import { Link } from 'react-router';

it('includes link to Mission scene', () => {                                       
  const wrapper = shallow(<MemoryRouter><Home /></MemoryRouter>);
  expect(wrapper.find(Link).props().to).toBe('/mission');
 });
3
Emre Sonmez

これは公式ドキュメントからの情報です：

<Link>または<Route>などをレンダリングするコンポーネントの1つを単体テストしようとすると、コンテキストに関するエラーと警告が表示されます。ルーターコンテキストを自分でスタブ化したくなるかもしれませんが、単体テストを<StaticRouter>または<MemoryRouter>でラップすることをお勧めします。

この リンク はあなたに役立つかもしれません。

3
Yevhenii Herasymchuk

通常のhtml要素と同様に、コンポーネントの名前を文字列として挿入するだけでクエリを実行できます

it('includes link to Mission scene', function() {
    const wrapper = shallow(<MemoryRouter><Home /></MemoryRouter>);
    expect(wrapper.find('Link').prop('to')).to.be.equal('/mission');
});
0
Ahmed Salah