使用帶有身份驗證的開玩笑問題測試 Redux 工具包查詢

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使用 function 來獲取當前令牌 - 如果您從另一個文件導入它，您也可以使用 jest mocking 來切換該導入。