返回

Jest & react-router-dom: React.createElement: type is invalid - 期望一个字符串(用于内置组件)......但得到:未定义

发布时间:2022-06-18 11:49:40 176
# node.js

我正在为一个组件编写测试,该组件Link来自react-router-dom.

组件本身可以正常工作而不会给出任何错误或警告。

但是,当使用shallowfrom呈现组件时enzyme,它会在控制台中显示以下错误消息。

警告:React.createElement:类型无效——需要一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:未定义。

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

据我研究,当您错误地导入 React 模块(或组件)时,显然会发生此错误。

例如

import Link from 'react-router-dom'; // Wrong!

import { Link } from 'react-router-dom'; // Correct!

但是,在我的情况下,Link它是正确导入的,但它仍然给出上面的警告消息。

这是该组件的一个片段。

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>

  );

};

(当我注释掉时<Link>,警告消息将从控制台消失。所以,使用useHistory()应该与警告无关)

jest.mock('react-router-dom', () => ({

  useHistory: jest.fn()

}));

describe('ListItem', () => {

  const baseProps = { /* initial props here*/ };

 

  it("renders the name", () => {

    const wrapper = shallow(<ListItem {...baseProps} />);

    // the line above shows the warning message in the console

  });

});

我完全一无所知。任何建议将被认真考虑。

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(2)
按点赞数排序
用户头像