测试<a>呈现另一个组件的 onclick 标记

Question

我有一个像这样的组件。

return (
<div>
<nav aria-label="breadcrumb">
<ol className="breadcrumb"}
>

<li className="breadcrumb-item"><a href="/home">Home</a></li>

<li className="breadcrumb-item active" aria-current="page">activepage</li>
</ol>
</nav>
</div>

);

和I是测试用例，如下所示:

describe("BreadCrumb Component", () => {
let shallowWrapper: ShallowWrapper;
let breadCrumbWrapper: ReactWrapper;
it('should be a div Component', () => {
shallowWrapper = shallow(<BreadCrumb ></BreadCrumb>);
expect(shallowWrapper.type()).toBe('div')
breadCrumbWrapper = mount(<BreadCrumb ></BreadCrumb>);
const breadcrumbvalues = breadCrumbWrapper.find('nav').find('ol').find('li').map(col => col.text());
expect(breadcrumbvalues).toHaveLength(2);
expect(breadcrumbvalues[0]).toEqual("Home");
expect(breadcrumbvalues[1]).toEqual("activepage");
breadCrumbWrapper.find('nav').find('ol').find('li').at(0).simulate('click');
......Here after clicking i want to test the component render which is (/home)...

})

谁能帮助我我应该如何测试onclick标签是否呈现另一个组件或不。提前感谢

Answer 1

可以用两种方法测试锚标记。
首先，像这样检查锚标记中的href值

expect(breadCrumbWrapper.find('nav').find('ol').find('li').at(0).find("a").prop("href")).toEqual("/home");

其次，模拟click事件后，可以检查location.pathname的值

expect(breadCrumbWrapper.props().location.pathname).toEqual("/home");

或

expect(window.location.pathname).toEqual("/home");