visgl / visgl/deck.gl

[Bug] React & Jest/RTL testing issue after upgrade to 9

Open
#9,243 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
14.6k
Forks
2.3k
Avg merge
2d 9h
Merged PRs (30d)
42

Description

Description

We recently upgraded our React-based app to using DeckGL 9.0.8 following the upgrade guide in the docs. The application itself works, but one of our test suites now fails with the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `FloorPlanMap`

FloorPlanMap is a React functional component that includes the DeckGL React component. We are testing our component with Jest/RTL using the RTL render method. We've tried adjusting imports, which is usually where you see this error.

Everything worked and all tests passed when we were using the latest DeckGL 8. Has anyone else run into this issue after upgrading to DeckGL 9?

Flavors
  • Script tag
  • React
  • Python/Jupyter notebook
  • MapboxOverlay
  • GoogleMapsOverlay
  • CartoLayer
  • ArcGIS
Expected Behavior

No response

Steps to Reproduce
import DeckGL from "deck.gl";

<DeckGL layers={[<insert layers here, though this error occurs even if this is empty>]}></DeckGL>

This code works fine in the application with no errors/issues, however when rendering it in a .test.tsx file using jest and react testing library , this error is seen:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Example of test:

import { render } from "@testing-library/react";
 it("should render the map and table", async () => {
    const { container } = render(<FloorplanMap/>);

      const map = container?.querySelector("#floorPlanMap");

      expect(map).toBeInTheDocument();
      expect(map?.tagName).toBe("CANVAS");
    
  });

We are using "jsdom" for our test environment in our jest config file.

Environment
  • Framework version: deck.gl@9.0.35, peer deps: @luma.gl/core@9.0.27
  • Browser: Chrome 130.0.6723.92
  • OS: macOS Sonoma 14.7.1
Logs

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the FloorPlanMap component and its DeckGL import, then reproduce the failure from the shown .test.tsx example using Jest, React Testing Library, and jsdom. Compare the test behavior across DeckGL 8 and 9; done means establishing a working DeckGL 9 test setup or clearly documenting the incompatibility.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.