使用玩笑进行测试时挂钩调用无效 - 本机反应

Question

我在测试屏幕时遇到问题。我正在尝试使用 jest snapshot 进行测试，但首先我不想通过 RTK Query request API 的简单测试。在下一个例子中，我尝试得到类似 Test didn't pass due to not equal results 的错误，但我得到 Invalid hook call 并且更多将在示例代码旁边。

ContactScreen-test.js

import 'isomorphic-fetch';
import { useGetUserDataQuery } from '../../services';

describe("testing", () => {
  test("should working properly", () => {
    const result = useGetUserDataQuery();
    console.log(result);
    expect(result).toBe("Idk what");
  });
});

从services.ts/

获取查询

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { RootState } from '../src/redux/store';

export interface UserResponse {
  data: {
    access_token: string;
    expires_in: number;
    refresh_token: string;
    role: string;
  };
}

export interface LoginRequest {
  email: string;
  password: string;
}

const device_id = '38bda1ce-f795-5cb8-8ae7-4c30b874';

export const callApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: 'api link here',
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as RootState).auth.access_token;

      if (device_id) {
        headers.set('Device_Id', device_id);
        headers.set('Authorization', `${token}`);
      }
      return headers;
    }
  }),
  endpoints: builder => ({
    login: builder.mutation<UserResponse, LoginRequest>({
      query: data => ({
        url: '/sessions',
        method: 'POST',
        body: data
      })
    }),
    getUserData: builder.query({
      query: (arg: void) => ({ url: `users/me/`, body: arg })
    }),
    getOfficeData: builder.query({
      query: (office_id: string) => ({ url: `office_contacts/${office_id}` })
    })
  })
});

export const { useLoginMutation, useGetOfficeDataQuery, useGetUserDataQuery } =
  callApi;

我得到的错误是：

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

       8 | describe("testing", () => {
       9 |   test("should working properly", () => {
    > 10 |     const result = useGetUserDataQuery();
         |                    ^
      11 |     console.log(result);
      12 |     expect(result).toBe("Idk what");
      13 |   });

Answer 1

您不能像测试普通函数那样测试挂钩。

为了测试钩子，你应该使用react-hooks-testing-library。

您可能需要做类似

的事情

import { renderHook } from '@testing-library/react-hooks'
import { useGetUserDataQuery } from '../../services';

test('should working properly', () => {
  const { result } = renderHook(() => useGetUserDataQuery())
  expect(result).toBe("Idk what");
})

使用玩笑进行测试时挂钩调用无效 - 本机反应

Invalid hook call while testing with jest - react native

javascript

jestjs

react-native

react-redux

rtk-query