テストコンポーネントは、冗談と酵素

Question

は私が反応し、ルータを使用する単純なコンポーネントを持っている（私は承知している、これはアルファ版です）テスト中にコンポーネントにコンテキストを提供します。私は私のコンポーネントがレンダリングすることをテストすることができるようにしたい - 私はHomeLoginは、接続されたコンポーネントであるため、問題の原因となる酵素のmount()またはrender()、使用する必要があります -

しかし、冗談/酵素と私はレンダリングshallow()にできないんだけど正しいものですが、ではなく、のコンポーネントをテストします。

私のテスト：

it('Renders based upon matched route',() => { 
    let props = { 
    app: { health: true }, 
    }; 
    const component = render(
    <Provider store={store}> 
     <MemoryRouter location="/"> 
     <Jumbotron {...props} /> 
     </MemoryRouter> 
    </Provider> 
); 
    expect(toJson(component)).toMatchSnapshot(); 
}); 

どのように私はReduxのストアを提供することや、浅いレンダリング使用せずに経路に基づいて、このコンポーネントの出力をテストすることができますか？

更新：shallow()を使用しようとすると、スナップショットは出力されません。

Answer 1

あなたは.find(Jumbotron)を使用して、例えば、スナップショットとしてのマッチングのためにそれを使用することができます。

const wrapped = component.find(Jumbotron); 
expect(toJson(wrapped)).toMatchSnapshot(); 

私はwithRouter()を含むより複雑な例を持っていたと私はスナップショットとしてマッチングの前に出力からすべてのキーを削除するに復元されました。まあ、React-Router v4のテストがJestとスナップショットテストでより強固になるまで。例：

export function removeKeys(object) { 
    if (object === undefined || object === null) { 
     return object; 
    } 
    Object.keys(object).forEach((key) => { 
     if (typeof object[key] === 'object') { 
      removeKeys(object[key]); 
     } else if (key === 'key') { 
      delete object[key]; 
     } 
    }); 
    return object; 
} 

... 

expect(removeKeys(toJson(component))).toMatchSnapshot();