reactjs - 快照测试错误:元素类型无效:应为字符串 [...]
问题描述
我正在尝试使用 React 和 Jest 进行一些简单的快照测试。
最初我收到此错误:Invariant failed: You should not use <Link> outside a <Router>
在阅读了这个问题后,我更新了我的测试并将我正在测试的组件包装在:<MemoryRouter>...</MemoryRouter>
. 完成此操作后,我开始收到一个新错误:Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
我不知道这意味着什么。
我的测试:
import React from "react";
import BookTile from "./BookTile";
import MemoryRouter from "react-router-dom";
import renderer from "react-test-renderer";
test("my test", () => {
let book = {};
const component = renderer.create(
<MemoryRouter>
<BookTile book={book} />
</MemoryRouter>
)
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
})
我正在测试的组件:
import React from "react";
import {Link} from "react-router-dom";
export default function BookTile(props) {
return (
<Link to={`/book/${props.book.id}`}>
<div className="book-tile" style={{'backgroundImage': `url(${process.env.REACT_APP_API_URL}/uploads/${props.book.cover_image_file_name})`}}>
<div className='book-tile-title'>
{props.book.title}
</div>
</div>
</Link>
)
}
解决方案
您没有正确导入内存路由器。它应该是这样的:
import {MemoryRouter} from 'react-router-dom'
推荐阅读
- javascript - ejs动态表单具有所有相同的数据
- python - 使用 Anaconda 设置 Python 环境
- java - jaxb - 从没有 xjc 的 xsd 生成 java 类
- mysql - 选择 SQL 列进入闪亮状态
- python - 根据另一个列表或数组查找数组/列表中元素的索引
- excel - 运行时错误 91:在 Outlook 2016 中导出全局联系人列表
- linux - `managed` 类型在我的 wlan 信息中是什么意思?
- ios - 如何将[String]数组添加到字典
- r-markdown - 交叉引用时包括章节标题
- c++ - 头文件似乎没有从主函数中识别变量