Bug: No alternative to Enzyme "attachTo", necessary to render certain libraries such as react-leaflet

[eric-burel]

React version: 16.13.1

Steps To Reproduce

1. In a project with React, and react-leaflet@2.7.0

import React from "react";
import Renderer from "react-test-renderer";
import { Map, TileLayer } from "react-leaflet";

let component = Renderer.create(
    <Map>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </Map>
  );

Link to code example: https://codesandbox.io/s/react-test-renderer-leaflet-mohzp

The current behavior

It raise an error Map container not found.

The expected behavior

Enzyme's attachTo option allow to mount the comment in a more realistic environment, which fixes this bug. But there is no equivalent feature in react-test-renderer as far as I know.

See PaulLeCam/react-leaflet#246 for more info about the Enzyme fix for this issue.

[rickhanlonii]

Hey @eric-burel, thanks for submitting the issue.

By design, react-test-renderer doesn't use a browser environment or JSDOM, so it's not possible to provide an attachTo feature to attach to an element.

If you're using Jest in a JSDOM environment, you can use ReactDOM directly as in:

import ReactDOM from "react-dom";
import { Map, TileLayer } from "react-leaflet";

let div = document.createElement('div');
document.body.appendChild(div);

ReactDOM.render(
  <Map>
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
  </Map>
, div);

But I would recommend using a DOM testing library like react-testing-library if this is something you want to do.

See the Jest DOM Testing guide for more info.

[eric-burel]

Big thanks for this solution with react-dom only, what I wanted to avoid is a dependency to Enzyme which would be counter-productive.
I am in the context of Storybook storyshots, which uses react-test-renderer as a default. Not sure how to switch the render mode for a specific story but I'll check that.

[eric-burel]

For googlers, this post is providing a satisfying solution with React Testing Library : https://stackoverflow.com/questions/52029273/using-react-testing-library-with-storyshots

After a first try, it feels more robust and faster to me than using Enzyme, in the context of Storyshots/Jest.