reactjs - 'instanceof' 的右侧不是 React 测试库中的对象

Question

我正在为我的 React 组件创建一个测试。该组件使用 window.dataLayer.push 函数将事件发送到 Google 跟踪代码管理器。

测试时，我得到 window.dataLayer.push 是 undefined，然后我在我的 setupTests.ts 中创建了一个 mock文件:

import "@testing-library/jest-dom/extend-expect";
import { server } from "mocks/server";

beforeAll(() => {
  server.listen();
});
beforeEach(() => {
  Object.defineProperty(global, "window", {
    value: {
      dataLayer: {
        push: jest.fn(),
      },
    },
  });
});
afterEach(() => {
  server.resetHandlers();
});
afterAll(() => {
  server.close();
});

现在我得到一个TypeError: Right-hand side of 'instanceof' is not an object。这发生在我的 render 函数中:

TypeError: Right-hand side of 'instanceof' is not an object

       5 |
       6 | const renderWithRouter = (ui: ReactElement): RenderResult => {
    >  7 |   return render(ui, { wrapper: MemoryRouter });
         |          ^
       8 | };
       9 |
      10 | export default renderWithRouter;

      at getActiveElementDeep (node_modules/react-dom/cjs/react-dom.development.js:7769:18)
      at getSelectionInformation (node_modules/react-dom/cjs/react-dom.development.js:7800:21)
      at prepareForCommit (node_modules/react-dom/cjs/react-dom.development.js:10163:26)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:23085:29)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11276:10)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:22990:3)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22329:3)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
      at node_modules/react-dom/cjs/react-dom.development.js:26021:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
      at node_modules/@testing-library/react/dist/pure.js:99:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at render (node_modules/@testing-library/react/dist/pure.js:95:26)
      at renderWithRouter (src/utils/renderWithRouter.ts:7:10)
      at Object.<anonymous> (src/pages/result/__tests__/result.test.tsx:28:3)

我的测试是这样定义的:

it("should render the results with no premium change", async () => {
  cookie.set("proposal", {
    proposalId: "test_flat",
    quotationId: "test_component",
  });
  cookie.set("quotation", {
    includes_funeral_plan: false,
    coverageChosen: 810000,
    monthlyPayment: 84.31,
    funeralCoverage: 7000,
  });

  renderWithRouter(
    <Provider store={store}>
      <CookiesProvider cookies={cookie}>
        <Result />
      </CookiesProvider>
    </Provider>
  );

  await screen.findByText("Seu seguro:");

  expect(screen.getByText("R$ 84,31")).toBeInTheDocument();
});

我认为这可能与我创建的模拟有关，但我不确定如何解决。

有什么想法吗？

提前致谢!

Answer 1

模拟实现错误。正确的做法是:

import "@testing-library/jest-dom/extend-expect";
import { server } from "mocks/server";

beforeAll(() => {
  Object.defineProperty(window, "dataLayer", {
    value: {
      push: jest.fn(),
    },
  });
  server.listen();
});
afterEach(() => {
  server.resetHandlers();
});
afterAll(() => {
  server.close();
});