testing with Jest and React Testing Library fails with TypeError message

[adriancoliba]

Hi, I'm trying to test this library with Jest and React Testing Library and could use some help.

RouteLoadingBar.js:

import React, { useEffect, useState } from "react";
import { useLocation } from from "react-router-dom";
import TopBarProgress from "react-topbar-progress-indicator";

TopBarProgress.config({
    barColors: {
        "0": "#98b3d8",
        "1.0": "#98b3d8",
    },
    className: "topbar",
});

function RouteLoadingBar() {
    const location = useLocation();
    const [showBar, setShowBar] = useState(false);

    useEffect(() => {
        setShowBar(true);
        setTimeout(() => setShowBar(false), 600);
    }, [location.pathname]);

    if (showBar) {
        return <TopBarProgress />
    }
    return "";
}


export default RouteLoadingBar;

RouteLoadingBar.test.js:

import React from "react";
import { render, screen } from "@testing-library/react";

import { Header } from "../";
import RouteLoadingBar from "./RouteLoadingBar";

it("should display Loading Bar when switching routes", () => {
        const { debug } = render(
                    <div>
                         <Header /> 
                        <LoadingBar/>
                    </div>
        );

        // act(() => { fireEvent.click(screen.getByText("Manage policies")); });
        // debug(undefined, 300000)
});

The above test fails rendering TopBarProgress with the following error:

TypeError: Cannot set property 'shadowBlur' of null
  31 |
  32 |     it("should display Loading bar when switching routes", () => {
> 33 |         const { debug } = render(
     |                           ^
  34 |                     <div>
  at repaint (node_modules/topbar/topbar.js:57:28)
  at Object.progress (node_modules/topbar/topbar.js:111:17)
  at Object.show (node_modules/topbar/topbar.js:96:24)
  at node_modules/react-topbar-progress-indicator/src/index.js:30:24
  at invokePassiveEffectCreate (../../node_modules/react-dom/cjs/react-dom.development.js:23487:20)
  at HTMLUnknownElement.callCallback (../../node_modules/react-dom/cjs/react-dom.development.js:3945:14)
  at HTMLUnknownElement.callTheUserObjectsOperation (../../node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
  at innerInvokeEventListeners (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
  at invokeEventListeners (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
  at HTMLUnknownElementImpl._dispatch (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
  at HTMLUnknownElementImpl.dispatchEvent (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
  at HTMLUnknownElement.dispatchEvent (../../node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
  at Object.invokeGuardedCallbackDev (../../node_modules/react-dom/cjs/react-dom.development.js:3994:16)
  at invokeGuardedCallback (../../node_modules/react-dom/cjs/react-dom.development.js:4056:31)
  at flushPassiveEffectsImpl (../../node_modules/react-dom/cjs/react-dom.development.js:23574:9)
  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 flushPassiveEffects (../../node_modules/react-dom/cjs/react-dom.development.js:23447:14)
  at Object.<anonymous>.flushWork (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
  at act (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:1107:9)
  at render (node_modules/@testing-library/react/dist/pure.js:95:26)
  at Object.<anonymous> (src/components/RouteLoadingBar/RouteLoadingBar.test.js:33:27)

I would like to mention that I've tried adding "shadowBlur" prop to the config but the test still failed.

Could upgrading "topbar" library solve this?

[MoOx]

Can this be related to this? https://github.com/buunguyen/topbar/blob/0c337a8b85e278d684d45ffc3b5b53a1de759ecc/topbar.js#L66 Not sure how your setup handle dom & canvas...

[andreivictor]

@adriancoliba I had the same error in an app created with create-react-app v5.0.1. Solved it by:

• installing jest-canvas-mock: npm install jest-canvas-mock --save-dev
• import jest-canvas-mock in component test file: import 'jest-canvas-mock'
• add the following config in package.json:

"jest": {
    "resetMocks": false
  }

Found the solution here.