2017-05-03 28 views
9

jestを使用して、反応ルータv4から<Link>のコンポーネントをテストしています。Jestを使って反応ルータv4からリンクをテストする

<Link />に反応ルータのコンテキストが必要であるという警告が表示されます<Router />コンポーネント。

テストでルータコンテキストを模擬したり提供するにはどうすればよいですか? (基本的にはどのように私はこの警告を解決するのですか?)

Link.test.js

import React from 'react'; 
import renderer from 'react-test-renderer'; 
import { Link } from 'react-router-dom'; 

test('Link matches snapshot',() => { 
    const component = renderer.create(
    <Link to="#" /> 
); 

    let tree = component.toJSON(); 
    expect(tree).toMatchSnapshot(); 
}); 

テストが実行される警告:あなたはあなたのコンポーネントをラップすることができ

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

答えて

12

をStaticRouterでルータのコンテキストをコンポーネントに取得するテストでは:

import React from 'react'; 
import renderer from 'react-test-renderer'; 
import { Link } from 'react-router-dom'; 
import { StaticRouter } from 'react-router' 

test('Link matches snapshot',() => { 
    const component = renderer.create(
    <StaticRouter location="someLocation" context={context}> 
     <Link to="#" /> 
    </StaticRouter> 
); 

    let tree = component.toJSON(); 
    expect(tree).toMatchSnapshot(); 
}); 

インクルードを見てください、私は同じ問題を持っていたとStaticRouterを使用すると、まだ私のテストでは、それが利用できる持っているより多くの設定を必要とcontextを必要とするので、私は非常に働いたMemoryRouterを使用して終了ルータdocs about testing

0

を反応させますよく問題はありません。

import React from 'react'; 
import renderer from 'react-test-renderer'; 
import { MemoryRouter } from 'react-router-dom'; 

// SampleComponent imports Link internally 
import SampleComponent from '../SampleComponent'; 

describe('SampleComponent',() => { 
    test('should render',() => { 
    const component = renderer 
     .create(
     <MemoryRouter> 
      <SampleComponent /> 
     </MemoryRouter> 
    ) 
     .toJSON(); 

    expect(component).toMatchSnapshot(); 
    }); 
}); 
関連する問題