前端測試 - mock react-router

[s103071049]

要進行前端測試撰寫，寫測試的頁面路由長相如下： '/v1/xxxxx/:id'，該頁面會透過 router 內建的 api match 去取到 id

查詢相關的文章：https://medium.com/@aarling/mocking-a-react-router-match-object-in-your-component-tests-fa95904dcc55，發現為了模擬出 history，需要安裝這個套件：https://www.npmjs.com/package/history

問題一：我的問題是為什麼不能自己做出 mock 的狀況？

就指定化參數，餵進去，他就會秀出我指定的 mock 值了？

以下是我的代碼：

import React from "react";
import "@testing-library/jest-dom";
import {
  cleanup,
  screen,
  waitFor,
  fireEvent,
  render
} from "@testing-library/react";
import { HashRouter as Router } from "react-router-dom";
import { UserContext } from "@/store/UserStore";
import { SettingContext } from "@/store/SettingStore";
import { settingData } from "@/utils/customRender";
import HPHotlistReportDetail from "@/containers/ReportPool/HPHotlistReport/detail";

import MockAdapter from "axios-mock-adapter";
import axios from "axios";

afterEach(cleanup);

jest.mock("react-i18next", () => ({
  useTranslation: () => ({ t: (str) => str })
}));

test("render well - first enter the page", async () => {
  const mock = new MockAdapter(axios);

  const mockHistory = {
    history: "/app/HPHotlistReport/f3267fb3-e303-4dd0-a67f-cdada9f3f109",
    match: {
      isExact: true,
      params: { id: "f3267fb3-e303-4dd0-a67f-cdada9f3f109" },
      path: "/app/HPHotlistReport/:id",
      url: "/app/HPHotlistReport/f3267fb3-e303-4dd0-a67f-cdada9f3f109"
    }
  };

  await waitFor(() => {
    render(
      <UserContext.Provider>
        <SettingContext.Provider
          value={{
            settingData
          }}
        >
          <Router>
            <HPHotlistReportDetail {...mockHistory} setTitle={jest.fn} />
          </Router>
        </SettingContext.Provider>
      </UserContext.Provider>
    );
  });
});

function HPHotlistReportDetail({ history, match, setTitle }) {
  console.log("------match----", match);

  const [data, setData] = useState({});
  const hotListDetailQuery = useQuery({
    url: api.HpHotlistReport.getReportDetail,
    method: api.Method.Get
  });

但不管我將我要指定化的參數放在
<HPHotlistReportDetail {...mockHistory} setTitle={jest.fn} /> 還是 這裡 <Router>，最後的結果都是：{ path: '/', url: '/', params: {}, isExact: true }

這是為什麼？碰到這樣的疑惑，我的關鍵字應該怎麼下？才能找到我想找到的原因。

目前只是猜測，因為 Router 這個 component 裏面底層實作跟一般元件不太一樣，所以單純的指定參數，他其實吃不進去，這樣。

問題二：什麼樣的情況下，會自己 mock，什麼樣的情境會推薦直接使用相關的 mock library ?

[aszx87410]

先回答問題二，通常你知道背後是怎麼做的就可以自己 mock，如果本來就是用到別人的 library，那先看別人的文件裡面有沒有講怎麼做，沒有的話就只能查 issues 或是 google

問題一的話，通常你原本開發的時候 code 怎麼寫，測試的時候就會怎麼測，也就是說你本來 HPHotlistReportDetail 的參數就是 react-router 幫你放進去的，那你測試的時候就不會自己放進去（而且自己放進去也被蓋掉了，背後應該是被 context 的值蓋掉）

[s103071049]

真的，去翻 react-router 底層的實作，Router 沒有提供 match 的參數，是透過 RouterChildContext 幫我放進去了。所以這也是為什麼我努力放了很多次都被蓋掉了。

補充個，後續透過 react-router 提供的 memory Router 模擬 match 的做法，達到我想指定畫參數的部分。感謝老師～

<MemoryRouter initialEntries={["blogs/1"]}>
     <Route path="blogs/:id">
        <HPHotlistReportDetail setTitle={jest.fn} />
     </Route>
</MemoryRouter>