Right-hand side of 'instanceof' is not an object in React Testing Library

Question

I'm creating a test to my React Component. This component uses the window.dataLayer.push function to send events to Google Tag Manager.

When testing, I got that window.dataLayer.push was undefined, then I created a mock to it in my setupTests.ts file:

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();
});

Now I'm getting a TypeError: Right-hand side of 'instanceof' is not an object. This is happening in my render function:

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)

My test is defined like this:

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();
});

I think this can be related with the mock I created, but I'm not sure how to solve it.

Any ideas?

Thanks in advance!

Answer 1

The mock was being implemented wrong. The correct way is:

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();
});