Firestore incompatible with Create React App / Jest / JSDOM

Version info

React: 17

Firebase: 8.2.10

ReactFire: 3.0.0-rc.0

Test case

import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import "firebase/auth";
import "firebase/firestore";
import {
  FirebaseAppProvider,
  useFirestore,
  useFirestoreDocData,
} from "reactfire";

function TestComponent() {
  const userRef = useFirestore().collection("users").doc("test");

  const { data: user, status } = useFirestoreDocData<any>(userRef);

  if (status !== "success") return <></>;

  return <>testing</>;
}

test("renders user", async () => {
  render(
    <FirebaseAppProvider
      firebaseConfig={config}
    >
      <TestComponent />
    </FirebaseAppProvider>
  );

  await waitFor(() => expect(screen.getByText("testing")).toBeInTheDocument());

  screen.debug();
});

Steps to reproduce

1. Use a standard create-react-app template
2. Setup a test similar to the one above
3. Run it

Expected behavior

Test should pass

Actual behavior

Error: Uncaught [TypeError: this.timerId.unref is not a function]
        at reportException (C:\Users\Matt\Dev\reactfire-test\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:62:24)
        at Timeout.task [as _onTimeout] (C:\Users\Matt\Dev\reactfire-test\node_modules\jsdom\lib\jsdom\browser\Window.js:396:9)
        at listOnTimeout (internal/timers.js:554:17)
        at processTimers (internal/timers.js:497:7) TypeError: this.timerId.unref is not a function
        at BackoffTimeout.unref (C:\Users\Matt\Dev\reactfire-test\node_modules\@grpc\grpc-js\src\backoff-timeout.ts:117:18)
        at new ResolvingLoadBalancer (C:\Users\Matt\Dev\reactfire-test\node_modules\@grpc\grpc-js\src\resolving-load-balancer.ts:199:25)
        at new ChannelImplementation (C:\Users\Matt\Dev\reactfire-test\node_modules\@grpc\grpc-js\src\channel.ts:242:34)
        at new Client (C:\Users\Matt\Dev\reactfire-test\node_modules\@grpc\grpc-js\src\client.ts:146:30)
        at new ServiceClientImpl (C:\Users\Matt\Dev\reactfire-test\node_modules\@grpc\grpc-js\src\make-client.ts:128:3)
        at GrpcConnection.Object.<anonymous>.GrpcConnection.ensureActiveStub (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\firestore\src\platform\node\grpc_connection.ts:90:25)
        at GrpcConnection.Object.<anonymous>.GrpcConnection.openStream (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\firestore\src\platform\node\grpc_connection.ts:175:23) 
        at PersistentListenStream.Object.<anonymous>.PersistentListenStream.startRpc (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\firestore\src\remote\persistent_stream.ts:571:28)
        at PersistentListenStream.Object.<anonymous>.PersistentStream.startStream (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\firestore\src\remote\persistent_stream.ts:443:24)
        at call (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\firestore\src\remote\persistent_stream.ts:420:16)
        at call (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\node_modules\google-closure-library\closure\goog\promise\promise.js:826:22)
        at goog.Promise.invokeCallback_ (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\node_modules\google-closure-library\closure\goog\promise\promise.js:1166:5)
        at executeCallback_ (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\node_modules\google-closure-library\closure\goog\promise\promise.js:1140:5)
        at D.call [as gc] (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\node_modules\google-closure-library\closure\goog\promise\promise.js:1111:5)
        at xc (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\node_modules\google-closure-library\closure\goog\async\run.js:124:7)
        at processTicksAndRejections (internal/process/task_queues.js:93:5)

      at console.error (node_modules/@testing-library/react/dist/act-compat.js:53:34)
      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:28)
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:396:9)

I’ve also raised issues elsewhere. I believe the problem is that Jest is loading Node dependencies and not the browser ones. I would be happy to find a workaround that lets me keep using create-react-app if the issues cant be fixed.

https://github.com/firebase/firebase-js-sdk/issues/4552 https://github.com/facebook/create-react-app/issues/10626

[alexmcmanus]

I ran into a series of issues trying to get CRA/Jests tests working with reactfire and the emulators, and ultimately gave up. I couldn’t even get the Firestore tests copied out of reactfire working in my project. It would be really helpful if the documentation could provide guidance (or even better, a working example) of how to get a CRA/Jest/Emulator test setup working for components and hooks. My Firestore rule tests work nicely with @firebase/rules-unit-testing, it’s just the React tests that I couldn’t get to work.

[Mattinton]

I’ve raised a bunch of issues and come to the conclusion that at the moment it’s not really possible/simple at the moment unfortunately. I’m currently in the process of coming up with add decent mocking solution.