Loadable-components: Testing loadable-components with Jest snapshots

[zaccolley]

Hi there,

Currently to use loadable with Jest and snapshots. Is there any strategies you could see to do this, running into lots of issues and there isn't a lot of Stack Overflow on this aha!

Thanks for your help

[gregberge]

Hello @zaccolley, I have never tried to do it! Maybe you could provide some code, users should be able to help you on it.

[ghost]

We use jest + enzyme + @loadable/components to test our code. We just recently switched from react-loadable, and we ran into one thing that we were able to work around but could be made better.

The loadable component returns a React.forwardRef which in jest + enzyme tests results in seeing a as the name of the component. This is ultimately unhelpful in ensuring regressions aren't made.

https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools talks about how to change the displayName for a ForwardRef, but this is only something that can be useful to end users if the display name includes the import path. That puts the change in the babel camp, and while I can read through that code I am not familiar with writing babel code.

Here's an example of some of our code:

home.js

import loadable from "common/LoadableHOC";

const LoadableHome = loadable(() => import(/* webpackChunkName:"home" */ "./Home"));

LoadableHome.displayName = "LoadableHome";

export default LoadableHome;

home.spec.js

import React from "react";
import Home from "./index";

describe("Home", () => {

    it("renders the loadable component", () => {
        const wrapper = shallow(<div>
            <Home/>
        </div>);

        expect(wrapper).toMatchSnapshot();
    });

});

home.spec.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Home renders the loadable component 1`] = `
<div>
  <LoadableHome />
</div>
`;

Our common/LoadableHOC wraps @loadable/component and breaks the forwardRef purposefully so that the displayName set in the individual file will show up in React's DevTools and in the jest snapshots. If the babel plugin could produce another property on the object, something to the likes of:

ctor:

 {
  displayName: () => `Loadable(${chunkName}-${getImportArg})`
  chunkName: ...,
  isready: ...,
  requireAsync: ...,
}

You could then change the loadable() code to something along:

...
const forwardRef = (props, ref) => (
      <EnhancedInnerLoadable forwardedRef={ref} {...props} />
);

forwardRef.displayName = ctor.displayName;

const Loadable = React.forwardRef(forwardRef);
...

I'd be glad to answer more questions about our jest setup if that would be helpful to anyone.

[zaccolley]

Gonna try this out, thank you @jhornby

[gregberge]

Oudated, I close it. Feel free to open a new issue.

[TSMMark]

@neoziro if this is outdated, what's the proper way to use loadable components with Jest?

[gregberge]

The issue is outdated I mean. The method described is not. I recommend testing library to test them. All tests in the repository use it, you can inspire from it.