Jest using incorrect dependency in JSDOM (Node deps not browser deps)

[matt-kinton]

🐛 Bug Report

For context I have raised this issue in CRA and firebase but I think it is actually a jest issue.

firebase/firebase-js-sdk#4552
facebook/create-react-app#10626

As you can see from the comments in firebase/firebase-js-sdk#4552
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.

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

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)

Expected behavior

The test should run and pass as expected

envinfo

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
    npm: 6.14.11 - ~/.nvm/versions/node/v12.18.3/bin/npm
  npmPackages:
    jest: ^26.6.0 => 26.6.0 

[SimenB]

You can use a custom resolver. browser and module is called out in the docs. I don't know if CRA supports specifying that option?

[matt-kinton]

CRA doesn't support specifying the option without ejecting.. When I do eject and use resolver: browser-resolve I get this error Module react-app-polyfill/jsdom in the setupFiles option was not found.. I've created a repository here for reproduction: https://github.com/Mattinton/broken-firebase-deps-jest-cra

[SimenB]

hah, the example in our docs doesn't work. You'll need to do

// resolver.js

'use strict';

const browserResolve = require('browser-resolve');

module.exports = browserResolve.sync;

then have "resolver": "<rootDir>/resolver.js" in your config

[matt-kinton]

That gives me this error:

SyntaxError: Cannot use import statement outside a module

    > 1 | import firebase from "firebase";
        | ^
      2 |
      3 | test("firestore test", async () => {
      4 |   const app = firebase.initializeApp({

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/App.test.tsx:1:1)

Guessing it's something to do with how CRA is setup?

Forgot to say this is the same issue I think #1909

[SimenB]

Yeah, it's ESM, you need either Babel/ts-jest or https://jestjs.io/docs/en/ecmascript-modules

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.