开玩笑反应测试库错误符号不是函数

Question

大家好，我对简单测试有疑问，我尝试测试在链接标签中有文本，在导航中有链接标签，但我看到错误符号不是函数，你能帮帮我吗？

我的测试代码：

const mockUseLocationValue = {
    pathname: "",
    search: '',
    hash: '',
    state: null
}
jest.mock('react-router', () => ({
    ...jest.requireActual("react-router") as {},
    useLocation: jest.fn().mockImplementation(() => {
        return mockUseLocationValue;
    })
}));

test("should render the home page", () => {
    render(<Header />);
    const navbar = screen.getByTestId("navbar");
    const link = screen.getByTestId("home-link");
    expect(link.innerHTML).toMatch("Home page");
    expect(navbar).toContainElement(link);
});

我的原始代码：

export const Header = ():JSX.Element => {
    const location = useLocation()
    const { pathname } = location
    const splitLocation = pathname.split('/')
    return (
        <HeaderBlock as='h3' block>
            <nav data-testid="navbar">
                <ul className={styles.links}>
                    <li>
                        <Link data-testid="home-link" to="/">
                            Home Page
                        </Link>
                    </li>
                </ul>
            </nav>
        </HeaderBlock>
    )
}

Answer 1

使用react-testing-library 时，您可以为render 函数指定其他选项，其中之一是wrapper。

wrapper

将 React 组件作为 wrapper 选项传递以使其呈现 围绕内部元素。这对于创建可重用的最有用 通用数据提供者的自定义渲染函数。

您不应该模拟您正在测试的功能。

创建一个内存路由器以进行测试。

import { MemoryRouter } from 'react-router-dom';

export const RouterWrapper = ({ children }) => (
  <MemoryRouter>{children}</MemoryRouter>
);

在测试中，导入包装器并传入选项。

import { RouterWrapper } from '../path/to/test/util';

test("should render the home page", () => {
  render(
    <Header />,
    {
      wrapper: RouterWrapper
    }
  );

  const navbar = screen.getByTestId("navbar");
  const link = screen.getByTestId("home-link");

  expect(link.innerHTML).toMatch("Home page");
  expect(navbar).toContainElement(link);
});