使用酶测试React Router Links上的点击行为 [英] testing click behavior on React Router Links with Enzyme
问题描述
虽然我最终尝试在此React Router示例中为该流编写一个酶测试: https://reacttraining.com/react-router/web/example/auth-workflow
While I'm ultimately trying to write an Enzyme test for the flow in this react router example: https://reacttraining.com/react-router/web/example/auth-workflow
import React from 'react';
import ReactDOM from 'react-dom';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { MemoryRouter, Route, Switch, Link } from 'react-router-dom';
const Home = () => <div>Home</div>;
const MockComp = () => (
<div className="protected">
<nav>hi</nav>
Protected
</div>
);
const MockDenied = () => <div className="denied">Denied</div>;
test('Renders visited protected component if authorized', () => {
const wrapper = mount(
<MemoryRouter initialEntries={['/']}>
<div>
<Link to="/foo" />
<Switch>
<Route path="/" component={Home} />
<Route path="/401" component={MockDenied} />
<ProtectedRouteBasic
path="/foo"
auth={{ hasAuth: true }}
component={MockComp}
/>
</Switch>
</div>
</MemoryRouter>
);
wrapper.find('a').simulate('click', { button: 0 });
expect(wrapper.find('.protected').length).toEqual(1);
expect(wrapper.find('.denied').length).toEqual(0);
});
我发现了许多问题,并试图消除复杂性,然后慢慢重新介绍我已删除的元素。
I've found a number of issues and have tried to peel away the complexity and then slowly reintroduce the elements that I've removed.
所以我参加了此测试,因为我需要继续进行以下工作:
So I've landed on this test as what I will need to get working to proceed:
test('Clicking link will render component associated with path', () => {
const wrapper = mount(
<MemoryRouter>
<div>
<Link to="/foo" />
<Switch>
<Route path="/" component={Home} />
<Route path="/foo" component={MockComp} />
</Switch>
</div>
</MemoryRouter>
);
wrapper.find('a').simulate('click', { button: 0 });
expect(wrapper.find('.protected')).toHaveLength(1);
});
但是,此测试未按预期工作,因为我希望测试能够通过当前状态。我已阅读此线程进行更新我的模拟
调用包括 {button:0}
以及此线程有关将整个路由器包装到功能组件中,但是就我而言,该选项对我不可用知道,因为我正在使用的框架似乎不允许这样做。另外,我认为那部分对我遇到的问题无关紧要。也就是说,任何帮助将不胜感激。
However, this test isn't working as expected as I expect the test to pass in its current state. I've read this thread to update my simulate
call to include the {button: 0}
as well as this thread about wrapping the entire router in a functional component, however, that option's not available to me as far as I know, since the framework I'm working with doesn't seem to allow for it. Additionally, I believe that that piece is immaterial to the issue I'm having. That said, any help would be much appreciated.
推荐答案
来自切换文档:
呈现第一个孩子匹配位置的
< Route>
或< Redirect>
。
在这种情况下< Route path = / component = {Home} />
在路径同时为 /
和 / foo
时匹配,因此
始终呈现。
In this case <Route path="/" component={Home} />
matches when the path is both /
and /foo
so Home
is always rendered.
您可以使用 精确
,因此仅当路径恰好是时才匹配/
,或将其移至路线
列表的末尾,以便其他路线优先匹配:
You can fix this by using either exact
so it only matches if the path is exactly /
, or moving it to the end of the Route
list so other routes match first:
test('Clicking link will render component associated with path', () => {
const wrapper = mount(
<MemoryRouter>
<div>
<Link to="/foo" />
<Switch>
<Route path="/foo" component={MockComp} />
<Route path="/" component={Home} />
</Switch>
</div>
</MemoryRouter>
);
wrapper.find('a').simulate('click', { button: 0 });
expect(wrapper.find('.protected')).toHaveLength(1); // SUCCESS
});
这篇关于使用酶测试React Router Links上的点击行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!