Не поддерживается ошибка при тестировании ожидания

Question

Я получаю странную ошибку при попытке использовать react-testing-library тестировать React.Suspense, Ошибка просто говорит "Не поддерживается", но не дает реального понимания проблемы. Я последовал примеру, что Кент Доддс сделал на YouTube.

Я разместил полный код моей проблемы на github здесь, но вот снимок тестового кода:

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"));
  });
});

Answer 1

Я недавно столкнулся с той же ошибкой. Я заметил, что рабочий образец Кента использовал create-react-app и задавался вопросом, было ли это Babeling чем-то особенным для Node/Jest. В результате использования CRA, его package.json использует предустановку babel react-app,

Попробуйте установить и настроить плагин babel-plugin-dynamic-import-node (который является специфической частью react-app предустановка я думаю нужна). Я считаю, что этот плагин превращает динамический импорт в require заявления для узла. Дополнительная информация: https://www.npmjs.com/package/babel-plugin-dynamic-import-node

установить плагин:

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

в my-consumer-pkg/babel.config.js добавьте плагин:

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

... этого должно быть достаточно, чтобы пройти Not Supported ошибка.

Кроме того, я заметил, что один из ваших тестов под названием "он лениво загружает локальный компонент" впоследствии провалился с этой ошибкой:

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

... так что я сделал небольшое изменение, чтобы LocalThing была функция

const LocalThing = () => <div>my local thing</div>;