3

I'm getting a strange error when trying to use react-testing-library to test React.Suspense. The error just says "Not Supported" but doesn't give any real insight into the problem. I followed the example that Kent Dodds did on youtube.

I posted the full code of my problem on github here, but here's a snapshot of the test code:

import React from "react";

import { render, waitForElement, cleanup } from "react-testing-library";
import MyOtherPackageThing from "my-package/lib/my-thing";
import LazyThing from "../src/index";

afterEach(cleanup);

test("it works", async () => {
  const { getByText, debug } = render(<MyOtherPackageThing />);

  await waitForElement(() => getByText("my thing"));

  expect(getByText("my thing"));
});

describe("these fail with 'Not Supported'", () => {
  test("it lazy loads a local component", async () => {
    const LazyLocalThing = React.lazy(() => import("../src/LocalThing"));
    const { getByText, debug } = render(
      <React.Suspense fallback="Loading...">
        <LazyLocalThing />
      </React.Suspense>
    );
    debug();
    await waitForElement(() => getByText("my local thing"));
    debug();
    expect(getByText("my local thing"));
  });

  test("it says not supported, like wtf", async () => {
    const { getByText, debug } = render(<LazyThing />);
    debug();
    await waitForElement(() => getByText("my thing"));
    debug();
    expect(getByText("my thing"));
  });
});
zishe
  • 10,665
  • 12
  • 64
  • 103
Ben
  • 16,124
  • 22
  • 77
  • 122
  • Can you share more details about an issue? I have some errors, when trying `yarn jest` in `my-consumer-pkg`, I can see some long log. And maybe you should open an issue in that testing package, cause it will be hard to find help here, this is highly specialized question. – zishe Mar 11 '19 at 03:15
  • @zishe sure, what would you like to know? The code in github has a readme on how to reproduce. I put everything in a `run.sh` so you shouldn't have any problems setting it up. – Ben Mar 11 '19 at 15:08
  • I created an issue https://github.com/benmonro/not-supported-rtl-suspense/issues/1 , I don't see any `run.sh` file. – zishe Mar 12 '19 at 00:41

1 Answers1

2

I encountered the same error recently. I noticed that Kent's working sample was using create-react-app and wondered if it was Babeling something special for Node/Jest. As a result of using CRA, his package.json uses the babel preset react-app.

Try installing and configuring the plugin babel-plugin-dynamic-import-node (which is the specific part of the react-app preset I think we need). I believe this plugin transforms dynamic imports into require statements for Node. More info: https://www.npmjs.com/package/babel-plugin-dynamic-import-node

install the plugin:

npm i --save-dev babel-plugin-dynamic-import-node

in my-consumer-pkg/babel.config.js, add the plugin:

plugins: [
    ...
    "babel-plugin-dynamic-import-node"
]

...this should be enough to get past the Not Supported error.

As an aside, I noticed that one of your tests named "it lazy loads a local component" was subsequently failing with this error:

Element type is invalid. Received a promise that resolves to: [object Object]. Lazy element type must resolve to a class or function.

...so I made a minor change so that the LocalThing was a function

const LocalThing = () => <div>my local thing</div>;
wcaneira
  • 21
  • 3