Error running tests when using createRemixStub

[mahmoudmoravej]

What version of Remix are you using?

2.2

Are all your remix dependencies & dev-dependencies using the same version?

• [X] Yes

Steps to Reproduce

I am trying to setup testing for my project. So, tried to run exactly the same test provided here: https://remix.run/docs/en/main/other-api/testing#example

But the outcome is:

AIL   react  app/routes/managers/tests/route.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'bind')

      2 | import { createRemixStub } from "@remix-run/testing";
      3 | import { render, screen, waitFor } from "@testing-library/react";
    > 4 | import { json } from "@remix-run/node";

Environment:

• I almost using the latest version of any package.
• testEnvironment: "jsdom", but changing to "node" causes problem with "createRemixStub":

 FAIL   react  app/routes/managers/tests/route.test.tsx
  ✕ renders loader data (2 ms)

  ● renders loader data

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.
    
    ReferenceError: document is not defined

      21 |   ]);
      22 |
    > 23 |   render(<RemixStub />);

• you can see my experiement here: https://github.com/mahmoudmoravej/testui/pull/8/files

Expected Behavior

Run the test successfully.

Actual Behavior

Fails the test in both "node" and "jsdom" environment.

[jrestall]

I don't know what the fix might be for jest but if you are okay switching to vitest it's been working for me.

You would just need to install vitest and add the following config. https://vitest.dev/guide/#adding-vitest-to-your-project

// vitest.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true
  },
});

[aaschlote]

Hey I'm facing the same issue, any solution for this problem?