0

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

基本上，我使用的 api 旨在将令牌放在查询参数上，而不是放在请求标头上："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
  })
})
4

1 回答 1

1

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

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

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

于 2021-12-03T07:36:40.253 回答