Reactjs 开玩笑；react路由器dom:react.createElement:type无效--应为字符串（对于内置组件）。。。但得到：未定义

我正在为一个组件编写测试，该组件具有来自

react router dom

的

链接

组件本身工作时不会出现任何错误或警告

但是，当使用
enzyme
中的
shallow
渲染组件时，它会在控制台中显示以下错误消息

警告：React.createElement:类型无效--应为字符串（对于内置组件）或类/函数（对于复合组件），但Get:未定义

您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

据我所知，当您错误地导入React模块（或组件）时，就会发生此错误

e、 g

但是，在我的例子中，
链接
已正确导入，但它仍会给出上面的警告消息

下面是该组件的一个片段

import React from 'react';
import { Link, useHistory } from 'react-router-dom';
// other modules here

const ListItem = (props) => {
  const history = useHistory();
  const queryParameter = _.get(history, 'location.search', '');
  const pathName = `/blah/${props.id}${queryParameter}`;

  return (
    <li>
      <Link to={pathName}>
        <div>blah blah...</div>
      </Link>
    </li>
  );
};

我完全不懂。
任何建议都将不胜感激。
听起来您没有导入正确的文件（如果您有
）css
或
test.js
文件与组件共享同一名称并位于同一根目录中，则webpack可能会将错误的文件导入到测试文件中——因此，我建议指定组件名称和扩展名：
index.js
或
ListItem.js
）。否则，您可能忘记导出
ListItem
组件

import React from 'react';
import { Link, useHistory } from 'react-router-dom';
// other modules here

const ListItem = (props) => {
  const history = useHistory();
  const queryParameter = _.get(history, 'location.search', '');
  const pathName = `/blah/${props.id}${queryParameter}`;

  return (
    <li>
      <Link to={pathName}>
        <div>blah blah...</div>
      </Link>
    </li>
  );
};

工作示例（此示例使用
装载
和
路由器
——单击
测试
选项卡运行测试）：



组件/ListItem/index.js

import React from "react";
import get from "lodash/get";
import { Link, useHistory } from "react-router-dom";

function ListItem({ children, id, destination }) {
  const history = useHistory();
  const query = get(history, ["location", "search"]);

  return (
    <li style={{ margin: 0, padding: 0 }}>
      <Link to={`${destination}/${id}${query}`}>
        <div>{children}</div>
      </Link>
    </li>
  );
}

export default ListItem;

import React from "react";
import { mount } from "enzyme";
import { Router } from "react-router-dom";
import { createMemoryHistory } from "history";
import ListItem from "../index.js";

const children = "Test";
const id = 1;
const destination = "/home";
const query = "?id=1";
const initialPath = `${destination}/${id}${query}`;

const history = createMemoryHistory({
  initialEntries: [initialPath]
});

const initProps = {
  children,
  id,
  destination
};

const wrapper = mount(
  <Router history={history}>
    <ListItem {...initProps} />
  </Router>
);

describe("ListItem", () => {
  afterAll(() => {
    wrapper.unmount();
  });

  it("renders the children", () => {
    expect(wrapper.find("div").text()).toEqual(children);
  });

  it("renders a Link that contains destination, params.id and query", () => {
    expect(wrapper.find("Link").props().to).toEqual(
      `${destination}/${id}${query}`
    );
  });
});

从“React”导入React；
从“lodash/get”导入get；
从“react router dom”导入{Link，useHistory}；
函数ListItem（{children，id，destination}）{
const history=useHistory（）；
const query=get（历史记录，[“位置”，“搜索]）；
返回(

{儿童}

);
}
导出默认列表项；

组件/ListItem/\uuuuuuu测试/ListItem.test.js

import React from "react";
import get from "lodash/get";
import { Link, useHistory } from "react-router-dom";

function ListItem({ children, id, destination }) {
  const history = useHistory();
  const query = get(history, ["location", "search"]);

  return (
    <li style={{ margin: 0, padding: 0 }}>
      <Link to={`${destination}/${id}${query}`}>
        <div>{children}</div>
      </Link>
    </li>
  );
}

export default ListItem;

import React from "react";
import { mount } from "enzyme";
import { Router } from "react-router-dom";
import { createMemoryHistory } from "history";
import ListItem from "../index.js";

const children = "Test";
const id = 1;
const destination = "/home";
const query = "?id=1";
const initialPath = `${destination}/${id}${query}`;

const history = createMemoryHistory({
  initialEntries: [initialPath]
});

const initProps = {
  children,
  id,
  destination
};

const wrapper = mount(
  <Router history={history}>
    <ListItem {...initProps} />
  </Router>
);

describe("ListItem", () => {
  afterAll(() => {
    wrapper.unmount();
  });

  it("renders the children", () => {
    expect(wrapper.find("div").text()).toEqual(children);
  });

  it("renders a Link that contains destination, params.id and query", () => {
    expect(wrapper.find("Link").props().to).toEqual(
      `${destination}/${id}${query}`
    );
  });
});

从“React”导入React；
从“酶”导入{mount}；
从“react Router dom”导入{Router}；
从“历史记录”导入{createMemoryHistory}；
从“./index.js”导入列表项；
const children=“测试”；
常数id=1；
const destination=“/home”；
const query=“？id=1”；
const initialPath=`${destination}/${id}${query}`；
const history=createMemoryHistory({
initialEntries:[初始路径]
});
常量initProps={
儿童
身份证件
目的地
};
常量包装器=装入(
);
描述（“列表项”，（）=>{
毕竟（（）=>{
wrapper.unmount（）；
});
它（“呈现子对象”，（）=>{
expect（wrapper.find（“div”）.text（））.toEqual（children）；
});
它（“呈现包含目标、参数id和查询的链接”，（）=>{
expect（wrapper.find（“Link”）.props（）to.toEqual(
`${destination}/${id}${query}`
);
});
});
听起来您没有导入正确的文件（如果您有
）css
或
test.js
文件与组件共享同一名称并位于同一根目录中，则webpack可能会将错误的文件导入到测试文件中——因此，我建议指定组件名称和扩展名：
index.js
或
ListItem.js
）。否则，您可能忘记导出
ListItem
组件

import React from 'react';
import { Link, useHistory } from 'react-router-dom';
// other modules here

const ListItem = (props) => {
  const history = useHistory();
  const queryParameter = _.get(history, 'location.search', '');
  const pathName = `/blah/${props.id}${queryParameter}`;

  return (
    <li>
      <Link to={pathName}>
        <div>blah blah...</div>
      </Link>
    </li>
  );
};

工作示例（此示例使用
装载
和
路由器
——单击
测试
选项卡运行测试）：



组件/ListItem/index.js

import React from "react";
import get from "lodash/get";
import { Link, useHistory } from "react-router-dom";

function ListItem({ children, id, destination }) {
  const history = useHistory();
  const query = get(history, ["location", "search"]);

  return (
    <li style={{ margin: 0, padding: 0 }}>
      <Link to={`${destination}/${id}${query}`}>
        <div>{children}</div>
      </Link>
    </li>
  );
}

export default ListItem;

import React from "react";
import { mount } from "enzyme";
import { Router } from "react-router-dom";
import { createMemoryHistory } from "history";
import ListItem from "../index.js";

const children = "Test";
const id = 1;
const destination = "/home";
const query = "?id=1";
const initialPath = `${destination}/${id}${query}`;

const history = createMemoryHistory({
  initialEntries: [initialPath]
});

const initProps = {
  children,
  id,
  destination
};

const wrapper = mount(
  <Router history={history}>
    <ListItem {...initProps} />
  </Router>
);

describe("ListItem", () => {
  afterAll(() => {
    wrapper.unmount();
  });

  it("renders the children", () => {
    expect(wrapper.find("div").text()).toEqual(children);
  });

  it("renders a Link that contains destination, params.id and query", () => {
    expect(wrapper.find("Link").props().to).toEqual(
      `${destination}/${id}${query}`
    );
  });
});

从“React”导入React；
从“lodash/get”导入get；
从“react router dom”导入{Link，useHistory}；
函数ListItem（{children，id，destination}）{
const history=useHistory（）；
const query=get（历史记录，[“位置”，“搜索]）；
返回(

{儿童}

);
}
导出默认列表项；

组件/ListItem/\uuuuuuu测试/ListItem.test.js

import React from "react";
import get from "lodash/get";
import { Link, useHistory } from "react-router-dom";

function ListItem({ children, id, destination }) {
  const history = useHistory();
  const query = get(history, ["location", "search"]);

  return (
    <li style={{ margin: 0, padding: 0 }}>
      <Link to={`${destination}/${id}${query}`}>
        <div>{children}</div>
      </Link>
    </li>
  );
}

export default ListItem;

import React from "react";
import { mount } from "enzyme";
import { Router } from "react-router-dom";
import { createMemoryHistory } from "history";
import ListItem from "../index.js";

const children = "Test";
const id = 1;
const destination = "/home";
const query = "?id=1";
const initialPath = `${destination}/${id}${query}`;

const history = createMemoryHistory({
  initialEntries: [initialPath]
});

const initProps = {
  children,
  id,
  destination
};

const wrapper = mount(
  <Router history={history}>
    <ListItem {...initProps} />
  </Router>
);

describe("ListItem", () => {
  afterAll(() => {
    wrapper.unmount();
  });

  it("renders the children", () => {
    expect(wrapper.find("div").text()).toEqual(children);
  });

  it("renders a Link that contains destination, params.id and query", () => {
    expect(wrapper.find("Link").props().to).toEqual(
      `${destination}/${id}${query}`
    );
  });
});

从“React”导入React；
从“酶”导入{mount}；
从“react Router dom”导入{Router}；
从“历史记录”导入{createMemoryHistory}；
从“./index.js”导入列表项；
const children=“测试”；
常数id=1；
const destination=“/home”；
const query=“？id=1”；
const initialPath=`${destination}/${id}${query}`；
const history=createMemoryHistory({
initialEntries:[初始路径]
});
常量initProps={
儿童
身份证件
目的地
};
常量包装器=装入(
);
描述（“列表项”，（）=>{
毕竟（（）=>{
wrapper.unmount（）；
});
它（“呈现子对象”，（）=>{
expect（wrapper.find（“div”）.text（））.toEqual（children）；
});
它（“呈现包含目标、参数id和查询的链接”，（）=>{
expect（wrapper.find（“Link”）.props（）to.toEqual(
`${destination}/${id}${query}`
);
});
});
我遇到了完全相同的问题！你有没有找到解决办法？我也有同样的问题！你找到解决办法了吗？