"npm run test" using incorrect dependency in JSDOM (Node not browser)

[matt-kinton]

Describe the bug

For context this is my issue firebase/firebase-js-sdk#4552.

As you can see from the comment it seems that Jest is loading in the Node binaries instead of the browser binaries. I have seen in earlier versions of Jest there was a --browser commands, and similar issues refer to this as the fix but that is no longer supported/not available in CRA.

Did you try recovering your dependencies?

I have tried deleting package-lock.json and node_modules.

Which terms did you search for in User Guide?

Dependencies, Test, Browser, Node

Environment

npx: installed 67 in 3.946s

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/matthewkinton/.npm/_npx/98006/lib/node_modules/create-react-app

  System:
    OS: macOS 11.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: Not Found
    npm: 6.14.11 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: 83.0
    Safari: 14.0.2
  npmPackages:
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    react-scripts: 4.0.3 => 4.0.3 
  npmGlobalPackages:
    create-react-app: Not Found

Additionally, this is happening on both Windows and Mac OS

Steps to reproduce

1. npx create-react-app test --template typescript
2. npm i firebase
3. Add a test similar to below

test("firestore test", async () => {
  const app = firebase.initializeApp();
  const test = await app.firestore().collection("users").doc("test").get();
});

4. npm run test

Expected behavior

The test should run and pass as expected

Actual behavior

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/en/configuration#testenvironment-string.
    Consider using the "node" test environment.
    
    TypeError: this.timerId.unref is not a function

      at BackoffTimeout.unref (node_modules/@grpc/grpc-js/src/backoff-timeout.ts:117:18)
      at new ResolvingLoadBalancer (node_modules/@grpc/grpc-js/src/resolving-load-balancer.ts:199:25)
      at new ChannelImplementation (node_modules/@grpc/grpc-js/src/channel.ts:242:34)
      at new Client (node_modules/@grpc/grpc-js/src/client.ts:146:30)
      at new ServiceClientImpl (node_modules/@grpc/grpc-js/src/make-client.ts:128:3)
      at GrpcConnection.Object.<anonymous>.GrpcConnection.ensureActiveStub (node_modules/@firebase/firestore/src/platform/node/grpc_connection.ts:90:25)
      at GrpcConnection.Object.<anonymous>.GrpcConnection.openStream (node_modules/@firebase/firestore/src/platform/node/grpc_connection.ts:175:23)
      at PersistentListenStream.Object.<anonymous>.PersistentListenStream.startRpc (node_modules/@firebase/firestore/src/remote/persistent_stream.ts:571:28)
      at PersistentListenStream.Object.<anonymous>.PersistentStream.startStream (node_modules/@firebase/firestore/src/remote/persistent_stream.ts:443:24)
      at call (node_modules/@firebase/firestore/src/remote/persistent_stream.ts:420:16)
      at call (node_modules/@firebase/node_modules/google-closure-library/closure/goog/promise/promise.js:826:22)
      at goog.Promise.invokeCallback_ (node_modules/@firebase/node_modules/google-closure-library/closure/goog/promise/promise.js:1166:5)
      at executeCallback_ (node_modules/@firebase/node_modules/google-closure-library/closure/goog/promise/promise.js:1140:5)
      at D.call [as gc] (node_modules/@firebase/node_modules/google-closure-library/closure/goog/promise/promise.js:1111:5)
      at xc (node_modules/@firebase/node_modules/google-closure-library/closure/goog/async/run.js:124:7)

[matt-kinton]

I have created an ejected test project here https://github.com/Mattinton/broken-firebase-deps-jest-cra.

[matt-kinton]

This fix here #2590 (comment) is no longer working for me. Using this

jest.mock("firebase/app", () => require("firebase/firebase-app.js"));
jest.mock("firebase/firestore", () =>
  require("firebase/firebase-firestore.js")
);
jest.mock("firebase/auth", () => require("firebase/firebase-auth.js"));

I get this error

Warning: This is a browser-targeted Firebase bundle but it appears it is being
         run in a Node environment.  If running in a Node environment, make sure you
         are using the bundle specified by the "main" field in package.json.
         
         If you are using Webpack, you can specify "main" as the first item in
         "resolve.mainFields":
         https://webpack.js.org/configuration/resolve/#resolvemainfields
         
         If using Rollup, use the @rollup/plugin-node-resolve plugin and specify "main"
         as the first item in "mainFields", e.g. ['main', 'module'].
         https://github.com/rollup/@rollup/plugin-node-resolve

[BraianS]

Good evening, Any update on this issue? Thanks.