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

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

2 голосов
/ 11 марта 2019

Я получаю странную ошибку при попытке использовать 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"));
  });
});

1 Ответ

1 голос
/ 06 июня 2019

Я недавно столкнулся с той же ошибкой. Я заметил, что в рабочем образце Кента использовался 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>;
...