使用 auth 的 jest issue 测试 Redux Toolkit Query

Question

我目前正在尝试为我的 RTKQuery 编写笑话测试，但我卡在了测试的身份验证级别上。

基本上，我使用的 api 旨在将令牌放在查询参数上，而不是放在请求上 header："https://api/v1/something/meta/?token=userToken"

因此，当我尝试测试 api 调用时，它显示请求已被拒绝。有谁知道如何用这种情况编写测试？

这是我的 RTKQuery 端点：

// index.ts
export const rootApi = createApi({
  reducerPath: "root",
  baseQuery: fetchBaseQuery({baseUrl: API_ROOT}),
  endpoints: () => ({});
})

// dataEndpoint.ts
const token = getToken(); // Gets the user's token from localStorage after user login

export cosnt apiWithData = rootApi.injectEndpoints({
  endpoints: (build) => ({
    fetchDataMetaList: build.mutation<DataType, any>({
      query: ({offset = 0, size = 20, body}) => ({
        // token is passed in for query param
        url: `${API_URL}?offset=${offset}&size=${size}&token=${token}`,
        method: "POST",
        body: body || {}
      })
    })
  })
})

下面是我的测试：

// data.test.tsx
const body = { offset: 0, size: 20, body: {} };
const updateTimeout = 10000;

beforeEach((): void => {
  fetchMock.resetMocks();
})

const wrapper: React.FC = ({ children }) => {
  const storeRef = setupApiStore(rootApi);
  return <Provider store={storeRef.store}>{children}</Provider>
}

describe("useFetchDataMetaListMutation", () => {
  it("Success", async () => {
    fetchMock.mockResponse(JSON.string(response));
    cosnt { result, waitForNextupdate } = renderHook(
      () => useFetchDataMetaListMutation(), 
      { wrapper }
    )

    const [fetchDataMetaList, initialResponse] = result.current;
    expect(initialResponse.data).toBeUndefined();
    expect(initialResponse.isLoading).toBe(false);

    act(() => {
      void fetchDataMetaList(body);
    })

    const loadingResponse = result.current[1];
    expect(loadingResponse.data).toBeUndefined();
    expect(loadingResponse.isLoading).toBe(true);

    // Up til this point everything is passing fine
   
    await waitForNextUpdate({ timeout: updateTimeout });

    const loadedResponse = result.current[1];

    // expect loadedResponse.data to be defined, but returned undefined
    // console out put for loaded Response status is 'rejected' with 401 access level 
    // error code
  })
})

Answer 1

执行顶级 const token 意味着一旦该文件被加载，它将从本地存储中检索该令牌并且它将永远无法更新 - 所以如果该文件是在用户登录之前加载，它将是空的。这几乎也是您在此处的测试中发生的情况。

老实说，这可能是我第一次看到令牌作为 url 的一部分（这是一个严重的安全问题，因为令牌将在用户之间共享复制粘贴url，即使在注销等后，它也会在浏览器历史记录中可见！）。

不幸的是，在那种情况下，您不能使用 prepareHeaders，但至少您可以代替 const 使用函数来获取当前令牌 - 如果您从另一个文件导入它，您也可以使用 jest mocking 来关闭该导入。

使用 auth 的 jest issue 测试 Redux Toolkit Query

Testing Redux Toolkit Query using jest issue with auth

reactjs

jest-fetch-mock

rtk-query