Javascript 测试组件路由器链路
我正在尝试测试我的组件,该组件包装在Javascript 测试组件路由器链路,javascript,reactjs,testing,jestjs,react-router-dom,Javascript,Reactjs,Testing,Jestjs,React Router Dom,我正在尝试测试我的组件,该组件包装在react router dom的链接组件中,如下所示: //PokemonItem/index.js 从“React”导入React; 从'react router dom'导入{Link}; 常量口袋妖怪=({pokemon})=>{ 常数{ id、img、名称、编号、类型、, }=口袋妖怪; 返回( # {number} {name} ); }; 导出默认口袋妖怪; 我使用react测试库的示例创建了我的测试文件: 这是我的测试文件: 从'@test
react router dom
的链接组件中,如下所示:
//PokemonItem/index.js
从“React”导入React;
从'react router dom'导入{Link};
常量口袋妖怪=({pokemon})=>{
常数{
id、img、名称、编号、类型、,
}=口袋妖怪;
返回(
#
{number}
{name}
);
};
导出默认口袋妖怪;
我使用react测试库的示例创建了我的测试文件:
这是我的测试文件:
从'@testing library/react'导入{render,screen}
从“@测试库/用户事件”导入userEvent
从“历史”导入{createMemoryHistory}
从“React”导入React
从“react Router dom”导入{Router}
导入“@testing library/jest dom/extend expect”
从“../components/PokemonItem”导入PokemonItem;
测试('完整应用程序呈现/导航',()=>{
const history=createMemoryHistory();
常量口袋妖怪={
id:1,
名称:'Bulbasaur',
编号:'#001',
img:“”,
类型:[],
身高:10
};
渲染(
);
expect(screen.getByText(/bulbasaur/i)).toBeInTheDocument();
常量leftClick={按钮:0};
单击(screen.getByText(/bulbasaur/i),左键单击);
期望(screen.getByText(/height/i)).toBeInTheDocument();
});
click事件应该重定向到一个只包含文本“height”的组件,这是我的PokemonDetails页面,但是没有成功
这是控制台上显示的错误:
Unable to find an element with the text: /height/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<div>
<a
href="/pokemon-details/1"
>
<div
class="pokemon-card"
>
<header
class="card-header"
>
<img
alt="Bulbasaur"
src=""
/>
</header>
<main
class="card-body"
>
<h6>
#
#001
</h6>
<h2>
Bulbasaur
</h2>
</main>
<footer
class="card-footer"
/>
</div>
</a>
</div>
</body>
62 |
63 | // check that the content changed to the new page
> 64 | expect(screen.getByText(/height/i)).toBeInTheDocument();
| ^
65 | })
找不到文本为:/height/i的元素。这可能是因为文本被多个元素分割。在这种情况下,您可以为文本匹配器提供一个功能,使匹配器更加灵活。
62 |
63 |//检查内容是否更改为新页面
>64 |期望(screen.getByText(/height/i)).toBeInTheDocument();
| ^
65 | })
它没有被重定向到详细信息页面
我已经尝试了很多教程,以及模拟单击的不同方法,包括fireEvent.click方法,但没有成功。我还需要做什么?导航时遇到的问题是什么?我在问题中添加了准确的错误描述,页面没有被重定向到详细信息页面也许你应该在
屏幕内传递一个字符串值。getByText()
我也尝试过,但第一个断言是确认标题存在,错误是确认单击不起作用。我还尝试移动链接作为示例,但没有任何效果您没有在路由器
包装器中呈现任何路由,那么为什么或如何链接推送可测试的新路由?这似乎不是针对PokemonItem
组件的合适单元测试,而是针对路由组件的测试用例。