React-testing-library
是一个用于测试 React 组件的库,它鼓励编写用户行为驱动的测试。它模拟用户在浏览器中的实际操作,如点击按钮、输入文本等,从而确保组件的行为符合预期。
<Link>
是 React Router 库中的一个组件,用于在 React 应用程序中实现导航。它通常用于创建链接,使用户可以在不同的页面之间导航。
当你在使用 React-testing-library
测试包含 <Link>
组件的 React 组件时,可能会遇到错误信息:“<Link>
元素类型无效:应为字符串或类/函数,但got: undefined”。这个错误通常是由于
<Link>` 组件未正确导入或定义导致的。
<Link>
组件:如果你没有从 react-router-dom
库中正确导入 <Link>
组件,React 将无法识别它。<Link>
组件未定义:如果 <Link>
组件在你的代码中未正确定义,React 也会抛出这个错误。<Link>
组件:import { Link } from 'react-router-dom';
<Link>
组件在代码中正确定义:import React from 'react';
import { Link } from 'react-router-dom';
const MyComponent = () => {
return (
<div>
<Link to="/some-path">Go to Some Path</Link>
</div>
);
};
export default MyComponent;
<Link>
组件:import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';
test('renders link', () => {
render(
<MemoryRouter>
<MyComponent />
</MemoryRouter>
);
const linkElement = screen.getByText(/Go to Some Path/i);
expect(linkElement).toBeInTheDocument();
});
通过以上步骤,你应该能够解决“<Link>
元素类型无效:应为字符串或类/函数,但got: undefined”这个问题。
领取专属 10元无门槛券
手把手带您无忧上云