测试组件，玩笑和酶

Question

我有一个使用反应路由器一个简单的组件（我知道这是alpha版本）：

{props.app && props.app.health && 
    <Match exactly pattern="/" component={HomeLogin} /> 
} 

到该文档推荐在包装<MemoryRouter />在测试时为组件提供上下文。

然而，玩笑/酶我无法shallow()渲染 - 我必须使用酶的mount()或render()，这会导致问题，因为HomeLogin是连接的组件 - 我希望能够来测试我的组件呈现正确的事情，但不是测试其中呈现的组件。

我的测试：

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();