Question

我正在应用程序中创建一个自动建议的输入。我正在为组件编写单元测试，但是看起来导入很麻烦，但仅在测试中。当我运行实际的应用程序时，一切都可以正常编译。

我将其范围缩小到我拉入项目的这个Autosuggest组件。如果我删除或注释掉它的引用，该错误就会消失。

import * as Autosuggest from "react-autosuggest";

...

const ProfileTagForm = (props: ProfileTagFormProps): ReactElement => {

...

  return (
    <>
      <h1>Add Tags</h1>
      <section>
        <TagAutosuggest
          suggestions={suggestions}
          onSuggestionsFetchRequested={onSuggestionsFetchRequested}
          onSuggestionsClearRequested={onSuggestionsClearRequested}
          getSuggestionValue={getSuggestionValue}
          renderSuggestion={renderSuggestion}
          inputProps={inputProps}
        />
      </section>
    </>
  );
};

这也是我要运行的测试：

import "../../spec_helper";

import React from "react";
import { renderWithRouter } from "../../react_helpers";
import ProfileTagForm from "../../../src/renderer/tags/ProfileTagForm";
import { tagFactory } from "../../factories/queries/TagsQuery.factory";

test("renders tags that match the input", () => {
  const mockedTags = [
    tagFactory.build({ title: "Houses" }),
    tagFactory.build({ title: "Hoses" }),
    tagFactory.build({ title: "Moose" }),
    tagFactory.build({ title: "Mouse" }),
  ];

  const rendered = renderWithRouter(<ProfileTagForm tags={mockedTags} />);

  expect(rendered.container).toHaveTextContent("House");
  expect(rendered.container).toHaveTextContent("Hose");
});

运行测试时出现的错误：

    Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

    Check the render method of `ProfileTagForm`.

      10 | 
      11 | export function renderWithRouter(element: ReactElement): RenderResult {
    > 12 |   return render(mockRouter(element));
         |          ^
      13 | }
      14 |

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ProfileTagForm`.
    in ProfileTagForm
    in Router (created by BrowserRouter)
    in BrowserRouter

The above error occurred in the <section> component:
    in section (created by ProfileTagForm)
    in ProfileTagForm
    in Router (created by BrowserRouter)
    in BrowserRouter

我觉得这很混乱，因为我确实从中得到了一个react元素，并且它在运行时有效。

任何人都不知道会发生什么事？我怀疑这可能是导入Autosuggest的方式，但我似乎找不到其他解决方法。

仅在测试期间反应错误：不变违规：元素类型无效

0 个答案: