Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 测试组件路由器链路_Javascript_Reactjs_Testing_Jestjs_React Router Dom - Fatal编程技术网

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
组件的合适单元测试,而是针对路由组件的测试用例。