首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React-testing-library和<Link>元素类型无效:应为字符串或类/函数,但got: undefined

基础概念

React-testing-library 是一个用于测试 React 组件的库,它鼓励编写用户行为驱动的测试。它模拟用户在浏览器中的实际操作,如点击按钮、输入文本等,从而确保组件的行为符合预期。

<Link> 是 React Router 库中的一个组件,用于在 React 应用程序中实现导航。它通常用于创建链接,使用户可以在不同的页面之间导航。

问题描述

当你在使用 React-testing-library 测试包含 <Link> 组件的 React 组件时,可能会遇到错误信息:“<Link>元素类型无效:应为字符串或类/函数,但got: undefined”。这个错误通常是由于<Link>` 组件未正确导入或定义导致的。

原因

  1. 未正确导入 <Link> 组件:如果你没有从 react-router-dom 库中正确导入 <Link> 组件,React 将无法识别它。
  2. <Link> 组件未定义:如果 <Link> 组件在你的代码中未正确定义,React 也会抛出这个错误。

解决方法

  1. 确保正确导入 <Link> 组件
代码语言:txt
复制
import { Link } from 'react-router-dom';
  1. 确保 <Link> 组件在代码中正确定义
代码语言:txt
复制
import React from 'react';
import { Link } from 'react-router-dom';

const MyComponent = () => {
  return (
    <div>
      <Link to="/some-path">Go to Some Path</Link>
    </div>
  );
};

export default MyComponent;
  1. 在测试文件中正确导入和使用 <Link> 组件
代码语言:txt
复制
import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('renders link', () => {
  render(
    <MemoryRouter>
      <MyComponent />
    </MemoryRouter>
  );
  const linkElement = screen.getByText(/Go to Some Path/i);
  expect(linkElement).toBeInTheDocument();
});

参考链接

通过以上步骤,你应该能够解决“<Link>元素类型无效:应为字符串或类/函数,但got: undefined”这个问题。

相关搜索:React-testing-library和<Link>元素类型无效:应为字符串或类/函数,但got:未定义元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但got: undefined不变冲突:元素类型无效:应为字符串或类,但got: undefined。检查`MyApp`的render方法ReactDOM -元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但got: undefined错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但got: undefinedReact本机错误:元素类型无效:应为字符串或类/函数,但got: undefined。但是在哪里呢?传递了正确的组件但仍反应本机错误:元素类型无效:应为字符串或类/函数,但got: undefinedReact错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但got: undefinedReact本机错误:元素类型无效:应为字符串或类/函数,但got:未定义元素类型无效:应为字符串或类函数不变冲突:元素类型无效:应为字符串或类/函数,但got: object-可能存在Babel问题X错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但got: objectMaterial UI:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但got: nullIE11:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但got: objectreact-window元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但got: object元素类型无效:应为字符串或类/函数,但未定义React.createElement:类型无效-需要字符串(对于内置组件)或类/函数(对于复合组件),但got: undefinedReact错误-元素类型无效:应为字符串(对于内置组件)或类/函数React-本机导航5-元素类型无效,应为字符串或类/函数React.createElement:类型无效,应为字符串或类/函数,但获取的是:<div />
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

用 Node.js 爬虫下载音乐

如果右键单击你感兴趣的元素,则可以检查该元素后面的 HTML 并获取更多信息。 ? 检查元素 你可以编写过滤器函数来微调所需的选择器数据。...这些函数遍历给定选择器的所有元素,并根据是否应将它们包含在集合中而返回 true false。 如果查看了上一步中记录的数据,可能会注意到页面上有很多链接没有 href 属性,因此无处可寻。...可以确定它们不是我们要寻找的 MIDI,所以需要写一个简短的函数来过滤掉那些 MIDI,并包含确实能够链接到 .mid 文件的 href 元素: const isMidi = (link) => {...if(typeof link.href === 'undefined') { return false } return link.href.includes('.mid'); }; 现在有一个问题...返回的 HTML 元素节点集合中创建一个数组,然后把过滤器函数应用到其中: got(vgmUrl).then(response => { const dom = new JSDOM(response.body

5.6K31

Qt Quick编程(1)——QML的核心部分ECMAScript

类型Null类型都只有一个值,即undefined、null。...Boolean(value) value是非空字符串、非0数字对象时,Boolean()返回true; value是空字符串、0、undefinednull,Boolean()返回false;...String(value) 它与调用tostring()方法的唯一不同在于:对nullundefined值强制类型转换可以生成字符串而不发生错误: var null2String...几个基本的对象: Object   Object是所有ECMAScript的基,Object的所有属性方法都会出现在其他中: Object中的属性: constructor,指向创建对象的函数...arr.length=10; //将数组长度恢复为10 //虽然长度被恢复为10,第9个元素却显示"undefined"   由上面的代码我们可以清楚的看到length属性的性质

2.5K00
  • 在 TS 中如何实现类型保护?类型谓词了解一下

    换句话说,类型保护可以保证一个字符串是一个字符串,尽管它的值也可以是一个数值。类型保护与特性检测并不是完全不同,其主要思想是尝试检测属性、方法原型,以确定如何处理值。...('left'); } 该方案有一定的限制,即它只对有效。...当判断的对象不是某个的实例时就无效了,比如: const anotherCar = { move: (distance: number) => null, turnSteeringWheel:...尽管 typeof instanceof 这两个关键字在很多情况下可以满足类型保护的需求,但在函数式编程的领域它们的功能就受限了。那么我们应该如何检查任何对象的类型的?...== undefined; } 在以上代码中,我们定义了一个通用的类型保护函数,你可以在需要的时候使用它来缩窄类型

    3.6K11

    从ES6到ES10的新特性万字大总结(不得不收藏)

    这种语言在万维网上应用广泛,它往往被称为JavaScriptJScript,实际上后两者是ECMA-262标准的实现扩展。 历史版本 至发稿日为止有九个ECMA-262版本发表。...,箭头函数,二进制数据,静态类型数组,集合(maps,sets weak maps),promise,reflection proxies。...,Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方法。...它的静态属性会暴露几个内建的成员对象;它的静态方法会暴露全局的symbol注册,且类似于内建对象作为构造函数来说它并不完整,因为它不支持语法:"new Symbol()"。...它允许区分字符类型,例如大写小写字母,数学符号标点符号。

    2.3K20

    求职 | 史上最全的web前端面试题汇总及答案2

    //// 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效...link@import的区别是?...undefined: (1)变量被声明了,没有赋值时,就等于undefined。 (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。...(3)对象没有赋值的属性,该属性的值为undefined。 (4)函数没有返回值时,默认返回undefined。 null: (1) 作为函数的参数,表示该函数的参数不是对象。...如果一个对象的引用数量为 0(没有其他对象引用过该对象),对该对象的惟一引用是循环的,那么该对象的内存即可回收。 ③setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。

    6.1K20

    TypeScript手记(六)

    如下面的例子: let x = 3 变量 x 的类型被推断为数字。这种推断发生在初始化变量成员,设置默认参数值决定函数返回值时。 大多数情况下,类型推断是直截了当地。...例如, let x = [0, 1, null] 为了推断 x 的类型,我们必须考虑所有元素类型。这里有两种选择:number null。...'${padding}'.`) } 然而,你必须要定义一个函数来判断类型是否是原始类型这并不必要。...TypeScript 具有两种特殊的类型,null undefined,它们分别具有值 null undefined。...字符串字面量类型 字符串字面量类型允许你指定字符串必须具有的确切值。在实际应用中,字符串字面量类型可以与联合类型类型保护很好的配合。通过结合使用这些特性,你可以实现类似枚举类型字符串

    1K10

    ELF文件及android hook原理

    段的链接信息(sh_link、sh_info) 如果节的类型链接相关的,比如重定位表、符号表等,那么sh_linksh_info两个成员包含的意义如下。对于其他段,这两个成员没有意义。...这个数组的第一个元素,也就是下标为0的元素无效的”未定义”符号。 他们的定义如下: ?...主要分下面几种情况: 如果符号不是”COMMON”类型的(即st_shndx不为SHN_COMMON),则st_value表示该符号在段中的偏移,即符号所对应的函数变量位于由st_shndx指定的段,...比如,Num13行指的是符号表中的第13个元素,符号名为main,它是函数类型,定义在第一个段(即.text段)的第001b偏移处,大小为64字节。...GOT 保存了程序中所要调用的函数的地址,运行一开时其表项为空,数组大小在编译时已经确定了,运行时会实时的更新表项。相当于链接器给动态加载器布置了填空题作业。

    3.9K81

    Day17:web前端开发面试题

    : string number boolean undefined Undefined 与 Null 的区别 Undefined 与 null 的值相等,类型不相等 typeof undefined...JavaScript 字符串字符串文本字符串)是一串字符 JavaScript 基本数据类型 基本数据类型有五种:字符串(String)、数字(Number)、布尔(Boolean)、空...JavaScript基本数据类型 (1)数值类型 (2)布尔类型 (3)字符串类型 (4)Undefined类型 (5)Null类型 2.JavaScript 保留关键字有哪些?...12.常见的HTTP状态码(HTTP Status Code) 常见状态吗:400(请求无效),401(需要权限),500(服务器错误) onreadystatechange 存储函数函数名),...14.数组用什么方法可以将数组中的元素连成一个字符串 join() 方法用于把数组中的所有元素放入一个字符串 15.x值 ? image.png ?

    64910

    JS魔法堂:LINK元素深入详解

    来引入外部层叠式样式文件,LINK元素各属性的具体含义、资源加载行为等方面却了解不多,本文打算稍微深入一下。  ...FF中需要静态动态引入LINK元素时,都必须等LINK元素被添加到渲染树中后才可以通过点方式修改disabled,否则修改无效,disabled值一直为false。...由于FF下通过Attribute方式设置disabled为true,和在LINK元素未加入渲染树前修改disabled为true均无效,因此仅FF下会触发onloadonerror事件。...对于空字符串、空白字符串//:0,均不作为;       3. 对于无效路径的HTTP URI Scheme资源(如:0),触发onerror事件;       4. ...对于无效路径资源资源类型与type属性值不匹配的(如fsjohnhuang.png,:0,//:0,空白字符串),则触发onerror事件;       3.

    3.3K100

    金九银十: 50 个JS 必须懂的面试题为你助力

    Concat() 它连接两个多个字符串。 forEach() 它为数组中的每个元素调用一个函数。 indexOf() 它返回指定值第一次出现时调用字符串对象中的索引。...length() 它返回字符串的长度。 pop() 它从数组中删除最后一个元素并返回该元素。 push() 它将一个多个元素添加到数组的末尾,并返回数组的新长度。...例如,breakboolean变量名无效。 JS 变量名不应该以数字(0-9)开头。它们必须以字母下划线开头。...例如,123name是一个无效的变量名,123namename123是一个有效的变量名。 JS 变量名区分大小写。例如,Testtest是两个不同的变量。...===:不做类型转换,类型不同的一定不等。 一言以蔽之:==先转换类型再比较,===先判断类型,如果不是同一类型直接为false。

    6.6K31

    详解 undefined 与 null 的区别

    Undefined Null 是 Javascript 中两种特殊的原始数据类型(Primary Type),它们都只有一个值,分别对应 undefined null ,这两种不同类型的值,既有着不同的语义场景...数组中的元素在内部也属于对象属性,访问下标就等于访问这个属性,返回 undefined ,就表示数组中不存在这个元素。 【3】函数定义了形参,没有传递实参 ?...ECMAScript 明确规定 void 操作符 对任何表达式求值都返回 undefined ,这函数执行操作后没有返回值的作用是一样的,JavaScript 中的函数都有返回值,当没有 return...相似性 虽然 undefined null 的语义场景不同,总而言之,它们都表示的是一个无效的值。 因此,在JS中对这类值访问属性时,都会得到异常的结果: ?...ECMAScript 规范认为,既然 null undefined 的行为很相似,并且都表示 一个无效的值,那么它们所表示的内容也具有相似性,即有 ?

    1.5K20

    如何测试 React Hooks ?

    Accordion,当组件为函数式时却并没有 instance 的概念。...所以当你把有状态生命周期的组件重构成用了 hooks 的函数式组件后,再调用诸如 .instance() .state() 等就不能如愿了。...一旦你把组件 Accordion 重构为函数式组件,那些测试就会挂掉。所以为了确保我们的代码库能在不推倒重来的情况下准备好 hooks 的重构,我们能做些什么呢?...当你从重构到 hooks 后,通常是把逻辑从 componentDidMount、componentDidUpdate componentWillUnmount 中移动到一个多个 useEffect...Ok,我们来试验一下这个想法: const sum = (a, b) => a + b 对于该函数的一种重构: const sum = (a, b) => b + a 它依然会一摸一样的运行,其自身的实现却有了一点不同

    1.5K10

    50 个JS 必须懂的面试题为你助力金九银十

    Concat() 它连接两个多个字符串。 forEach() 它为数组中的每个元素调用一个函数。 indexOf() 它返回指定值第一次出现时调用字符串对象中的索引。...length() 它返回字符串的长度。 pop() 它从数组中删除最后一个元素并返回该元素。 push() 它将一个多个元素添加到数组的末尾,并返回数组的新长度。...例如,breakboolean变量名无效。 JS 变量名不应该以数字(0-9)开头。它们必须以字母下划线开头。...例如,123name是一个无效的变量名,123namename123是一个有效的变量名。 JS 变量名区分大小写。例如,Testtest是两个不同的变量。...===:不做类型转换,类型不同的一定不等。 一言以蔽之:==先转换类型再比较,===先判断类型,如果不是同一类型直接为false。

    4.6K30

    JavaWeb02-CSS,JS(Java真正的全栈开发)

    inline visibility:定义元素是否可见不可见。...边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素 边框 元素的边框 (border) 是围绕元素内容内边距的一条多条线。...当函数无明确返回值时,返回的也是值 "undefined". Null类型也只有一个值 null,即它的字面量。...typeof 运算符有一个参数,就是要检查的变量值 例如: typeof 变量值 对变量值调用 typeof 运算符将返回下列值之一: undefined - 如果变量是 Undefined 类型的...引用类型 引用类型通常叫做(class),也就是说,遇到引用值,所处理的就是对象。从传统意义上来说,ECMAScript 并不真正具有

    2.6K150

    金九银十求职季,前端面试大全送给你

    每个元素都有一个diaplay属性,确定该元素类型,比如块级元素默认值就是block,行内元素就是none 行内元素:span a u i b img input slect。。。...3、引入样式linkimport区别 link属于html直接是在html中引入,import在css中引入只能引入css link在直接引入页面的时候就就已经引入了,import需要在引入css...js有五种基本类型:boolean string number null undefined 一种特殊类型:object 新增了Symbol(创建后独一无二且不可变的数据类型 ) 16、js基本规范...,可以继承原型链上的东西 既是子类实例又是父实例 缺点:调用了两次父构造函数 多耗费了一点内存 寄生式组合继承 优点:完美 缺点:实现复杂 20、js作用域链 作用域链的作用是保证执行环境里有权访问的变量函数是有序的...null==undefined true 23、eval 解析字符串,应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行),也可以把JSON字符串转换为JSON对象 24、window

    1.4K20

    这样回答前端面试题才能拿到offer

    (2)针对CSS:使用CSS有三种方式:使用link、@import、内联样式,其中link@import都是导入外部样式。...nullundefined区别首先 Undefined Null 都是基本数据类型,这两个基本数据类型分别都只有一个值,就是 undefined null。...undefined 代表的含义是未定义,null 代表的含义是空对象。一般变量声明了还没有定义的时候会返回 undefined,null主要用于赋值给一些可能会返回对象的变量,作为初始化。...这些数据可以分为原始数据类型引用数据类型:栈:原始数据类型Undefined、Null、Boolean、Number、String)堆:引用数据类型(对象、数组函数)两种类型的区别在于存储位置的不同...String 类型的值转换如同使用 Number() 函数进行转换,如果包含非数字值则转换为 NaN,空字符串为 0。Symbol 类型的值不能转换为数字,会报错。

    31130

    哈希表

    散列函数 散列函数有一个必须的参数,这个参数应该是一个字符串,而输出的是一个数字,散列函数可以将输入映射到数字。我们把输出的数字成为“散列值”。...b' '=' 并不是一样的,得到的哈希值却一样,这就是冲突。解决冲突的办法大致有两种。...put(key,value): 向散列表中添加新的元素,或者覆盖原来的数据; remove(key): 删除散列表中的指定元素; get(key): 查找并返回散列表中 key 映射的数据; 下面就一一实现这三个函数...我们让 key 可以是字符串也可以是数字,当是数字时,把数字当作数组的索引,返回对应稀疏数组索引对应的链表的第一项。当是别的类型时,求哈希值再找对应的数据。...这种实现方式,put、remove get 函数与前面的实现代码有些不同,而 getHash constructor 函数是一样的,这里只介绍一下那三个操作函数

    86730
    领券