我无法运行笑话快照测试，因为我不断收到“警告：无效的挂钩调用。”

Question

我的组件工作正常，但我需要为我的反应项目构建快照测试，但由于这个错误我不能。

（详细：我的数据测试运行正确）

我的 GitHub 存储库：

完全错误 在此输入图片描述 在此输入图片描述 在此输入图像描述在此输入图像描述

我正在尝试构建一个快照测试，以验证登录组件是否正常。

我尝试重新安装node_modules但没有成功

还尝试搜索多个版本和不兼容的版本

Answer 1

您的单元测试缺少为您正在测试的

useNavigate

组件中的

Login

钩子调用提供路由上下文。

更新单元测试以提供被测单元所需的所有上下文/等。

• Provider

  为

  useDispatch

  和

  useSelector

  钩子
提供 Redux 上下文

• MemoryRouter

  为

  useNavigate

  钩子
提供路由上下文

示例：

import React from "react";
import { render } from "@testing-library/react";
import { Provider } from "react-redux";
import { MemoryRouter } from "react-router-dom";
import '@testing-library/jest-dom';

import Login from "../components/Login/Login";
import store from "../store/store";

test('the component renders correctly', () => {
  const { asFragment } = render(
    <Provider store={store}>
      <MemoryRouter>
        <Login />
      </MemoryRouter>
    </Provider>
  );

  expect(asFragment()).toMatchSnapshot();
});

将提供者提取到 React-Testing-Library 的 render 函数使用的

 包装函数

中是很常见的。

基本示例：

import { Provider } from "react-redux";
import { MemoryRouter } from "react-router-dom";

import store from "../store/store";

export const TestProviders = ({ children }) => (
  <Provider store={store}>
    <MemoryRouter>
      {children}
    </MemoryRouter>
  </Provider>
);

import React from "react";
import { render } from "@testing-library/react";
import '@testing-library/jest-dom';

import Login from "../components/Login/Login";
import { TestProviders } from "../path/to/TestProviders";

test('the component renders correctly', () => {
  const { asFragment } = render(<Login />, { wrapper: TestProviders});

  expect(asFragment()).toMatchSnapshot();
});