测试悬念时不支持错误答案

【问题标题】：Not Supported Error when testing suspense测试悬念时不支持错误
【发布时间】：2019-08-01 07:57:56
【问题描述】：

我在尝试使用 react-testing-library 测试 React.Suspense 时遇到一个奇怪的错误。该错误只是说“不支持”，但没有对问题提供任何真正的洞察力。我按照Kent Dodds did on youtube的例子。

我发布了full code of my problem on github here，但这里是测试代码的快照：

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

【问题讨论】：

您能否分享有关某个问题的更多详细信息？我有一些错误，在my-consumer-pkg 中尝试yarn jest 时，我可以看到一些长日志。也许您应该在该测试包中打开一个问题，因为在这里很难找到帮助，这是一个高度专业化的问题。
@zishe 当然，你想知道什么？ github 中的代码有一个关于如何重现的自述文件。我把所有东西都放在了run.sh，所以你设置它应该没有任何问题。
我创建了一个问题 github.com/benmonro/not-supported-rtl-suspense/issues/1 ，我没有看到任何 run.sh 文件。

标签： reactjs testing jestjs react-testing-library react-suspense

【解决方案1】：

我最近遇到了同样的错误。我注意到 Kent 的工作示例使用了create-react-app，并想知道它是否在为 Node/Jest 做一些特殊的 Babeling。由于使用了CRA，他的package.json使用了babel预设react-app。

尝试安装和配置插件babel-plugin-dynamic-import-node（这是我认为我们需要的react-app预设的特定部分）。我相信这个插件将动态导入转换为 Node.js 的 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>;

【讨论】：