正在将prop插入到react组件的Jest测试中-接收“无法读取属性”映射“未定义的”错误
在将prop插入到React组件的Jest测试中，出现"无法读取属性"映射"未定义的"错误通常是由于未正确设置和传递props导致的。下面是一些可能的解决方案和建议：
- 确保在测试之前正确设置和传递props。在Jest测试中，可以使用
shallow函数或mount函数从Enzyme库中创建React组件的实例，并通过setProps方法设置和更新props。例如： - 确保在测试之前正确设置和传递props。在Jest测试中，可以使用
shallow函数或mount函数从Enzyme库中创建React组件的实例，并通过setProps方法设置和更新props。例如： - 确保在组件中正确使用和接收props。在React组件中，可以通过在组件定义的参数列表中声明props来接收传递的props。例如：
- 确保在组件中正确使用和接收props。在React组件中，可以通过在组件定义的参数列表中声明props来接收传递的props。例如：
- 确保在测试中正确访问和使用props。在测试中，可以使用
props()方法访问组件的props，并进行相应的断言和判断。例如： - 确保在测试中正确访问和使用props。在测试中，可以使用
props()方法访问组件的props，并进行相应的断言和判断。例如：
如果以上方法仍然无法解决问题，请确保你的测试环境和配置正确，并且React、Jest、Enzyme等库的版本兼容。
对于上述问答内容中提到的名词"Jest"，它是一个用于JavaScript的测试框架，用于编写和运行单元测试。Jest具有易于使用的API，可以进行断言、模拟和覆盖率报告等功能。Jest通常与React一起使用，并且与React的测试工具Enzyme配合使用可以更方便地进行React组件的单元测试。
关于Jest的更多信息，你可以参考腾讯云的Jest产品介绍页面：Jest产品介绍
相关·内容
和其他应用程序一样，为了呈现我的receive的一个特定部分，我希望从后端API中收到一个项目列表。我创建了一个典型的Card组件来显示每个项目的数据。此卡片组件有一个父组件，它对所有项都是通用的。会是这样的：
<ParentComponent>
<CardItem headline image/>
</ParentComponent>
支持headline和image是必需的，所以理论上，我应该总是从API中接收它们。因此，我按照组件中的要求设置了这些道具：
CardItem.propTypes = {
headline: PropTypes.str
浏览 2提问于2020-06-09得票数 0
我刚刚开始为React JS做一些单元测试--使用Jest / enzyme。我想知道哪种测试(格式)更有用，更适合用于未来的测试。这是我目前正在做的两个不同的测试。
单元测试1:我的大部分测试都是基于这个设置的编写的
import React from 'react';
import Enzyme from 'enzyme';
import { shallow} from 'enzyme';
import EditWorkflow from './EditWorkflow';
import Adapter from 'e
浏览 42提问于2019-01-02得票数 0
我正在学习如何在React中进行测试，我有一个带有输入的组件来编写要搜索的内容，一个选择框来选择要搜索的位置，还有一个按钮可以根据选择框中选择的内容进行排序。 我做了一个测试，看看当我改变选择框的选项时，它是否调用了setFilterBy函数。它进入函数内部，并按照预期从"title“更改为"author”，但它不会检测到模拟函数的调用。有人知道这有什么问题吗？ 组件 import React, { useState } from "react"
import PropTypes from "prop-types"
interface Pro
浏览 26提问于2020-04-10得票数 0
回答已采纳
嗨，最近我正在用jest+enzyme测试我的react应用程序，用useState或useEffect写测试真的让我很困惑。 所以这是我的代码，我想测试当用户点击按钮时，描述是否显示。(通过更改状态值) const Job = ({ job }) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = (id) => {
setIsOpen(!isOpen);
};
return (
<Card>
<Card.Text>
浏览 8提问于2020-07-23得票数 1
回答已采纳
1回答
我有一个类似下面的组件，如何对我标记的两行进行jest测试？非常感谢 class App extends React.Component {
constructor(props) {
super(props);
...
);
}
...
render() {
...
if (props && props.context) { // need jest testing
props.context.index = props
浏览 10提问于2021-04-02得票数 1
我编写了一个React应用程序，并使用jest编写单元测试。
当我通过"jest --config=jest.config.json -watch“运行它时，我得到以下错误：
测试套件无法运行
TypeError:路径必须是字符串。在assertPath (path.js:7:11) at Object.relative (path.js:1226:5)处接收未定义的
我的jest.config.json是：
{
"snapshotSerializers": [
"enzyme-to-json/serializer"
浏览 0提问于2018-05-02得票数 1
我试图为一个名为AsyncApp的容器组件编写单元测试，但我得到了以下错误："mapStateToProps必须返回一个对象，而不是接收到未定义的对象。“
这是我的装备。
Root.js
import configureStore from '../configureStore';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import AsyncApp from './AsyncApp';
cons
浏览 6提问于2016-01-05得票数 10
回答已采纳
1回答
我有一些来自第三方加载项/库的子组件。我使用Jest作为我的单元测试和toMatchSnapshot()方法。我试图用jest.unmock('ChildComponet.js')排除子组件，得到了以下错误：
jest.unmock('ChildComponet.js')被调用，但是自动锁定是禁用的。删除对jest.unmock的不必要调用，或通过jest.enableAutomock();__为此测试启用自动锁定。此警告可能是Jest 15中默认配置更改的结果。
我启用了jest.enableAutomock();，现在我有了一个错误：
TypeError:无
浏览 2提问于2016-10-14得票数 0
回答已采纳
错误：
undefined is not an object (“evaluating _react3.default.PropTypes.shape”)
...
<unknown>
App.js 15
...
参考：
App.js：
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import NavigationExperimental from 'rea
浏览 3提问于2017-10-15得票数 2
3回答
我使用了一个添加到上下文中的方法，该方法在componentDidMount()生命周期方法中触发。
我应该能够通过提供一个对酶的shallow()方法的选项来存根上下文，但是这不会传递给我的组件。例如：
我的测试：
it('renders without crashing', () => {
const context = { dispatch: jest.fn() };
shallow(<MyComponent />, { context });
});
和我的组件：
import React, { Component } from 'r
浏览 5提问于2018-12-11得票数 2
这是一个示例实现：
export class Person extends Component {
componentDidMount() {
const { onLoadProfile, onLoadPolicy, person } = this.props
onLoadProfile(person.profile.uri)
onLoadPolicy(person.policy.uri)
}
componentDidUpdate(prevProps) {
const { onLoadProfile, onLoadPolicy, person }
浏览 1提问于2018-10-22得票数 27
回答已采纳
1回答
我有这样的组件。它是另一个组件的包装器组件。有一个onClick函数，如果是鼠标事件，应该调用日志
import log from './log';
export function withPressedLog(
Component,
options,
) {
class WithPressedLogComponent extends React.Component {
constructor(props) {
super(props);
this.onClick = this.onCli
浏览 0提问于2018-06-19得票数 3
2回答
我刚开始使用React，我正在TaskList.js类型的arrayOf文件中实现arrayOf，但在编译应用程序时，我得到了一个错误，指示“未定义不是一个对象(计算'react3.default.PropTypes.arrayOf ')”，即使我添加了另一个字符串类型的PropTypes或另一个PropTypes，也会发生同样的事情。
如何使用PropTypes解决这个问题？
误差
package.json
{
"name": "test",
"version": "0.1.0",
"
浏览 0提问于2018-03-26得票数 0
回答已采纳
1回答
我有一个简单的输入组件，我想用jest来测试它，酶。 import TextField from '@material-ui/core/TextField';
import React from 'react';
const TextComponent = (props) => {
const handleInputChange = (name) => ({ target }) => {
props.handleChange({ [name]: target.value }, target.value);
};
retu
浏览 20提问于2019-09-27得票数 0
回答已采纳
我正在寻找一种方法来检查我的状态是否在钩子组件中进行了适当的更新。该组件是一个简单的下拉菜单，单击时会打开和关闭。
我尝试了几种不同的方法在我的测试中挂载组件，并使用jest模拟函数。然而，我还没能找到一种方法来测试状态是否更新。
我有一个带有函数handleClick的组件Dropdown
const Dropdown = props => {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClick = () => {
setO
浏览 0提问于2019-09-21得票数 0
我想测试父组件，但我想在没有redux的情况下这样做。我有问题是因为我有错误：
不变冲突:在“连接(MarkerList)”的上下文或属性中找不到“存储”。或者将根组件包装在中，或者显式地将“存储”作为道具传递给“连接(MarkerList)”。
我的父组件：
export class Panel extends React.Component {
constructor(props) {
}
componentDidUpdate(prevProps) {
...
}
handleCheckBox = event => {
...
};
s
浏览 1提问于2020-04-20得票数 0
我建立了一个组件的反应和材料-UI。我用的是React和Redux。
我的index.jsx如下所示：
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import configureStore from '../store/conf
浏览 2提问于2017-04-09得票数 14
回答已采纳
我不确定如何在接收子对象的上下文之外访问props对象，有什么方法吗？下面是我设置用来进行实验的最小测试文件(Jest和Enzyme)。我在尝试将this.props.propNumber传入："this is a reserved word"时出现语法错误 const React = require("react");
const enzyme = require("enzyme");
const Adapter = require("enzyme-adapter-react-16");
enzyme.configure({
浏览 31提问于2019-02-15得票数 0
回答已采纳
3回答
我正试图弄清楚如何在中用Jest测试一个"onPress“事件，这样我就可以确保调用了正确的函数。
我查看了文档和Google，但在React中找不到解决方案--本机。
这就是我所发现的，应该适用于React的东西-- enzyme本机
const mockFunc = jest.fn();
const component = mount(<MyComponent onPress={mockFunc} />);
component.simulate('press');
expect(mockFunc).toHaveBeenCalled();
但这不管用。mo
浏览 2提问于2017-02-16得票数 15
1回答
我有一个使用react-select的组件。我想测试传递给它的道具是否正确，以及这些道具是否正确显示。有没有办法强制菜单在酶/jest中打开？
浏览 21提问于2019-02-05得票数 2
回答已采纳
1回答
我是一个全新的反应和开玩笑的人。我有一个带有两个日期字段的react组件，也有按钮，我想使用jest框架进行测试。正如我所说的，我对React和jest都是新手，如果有人能举个例子，我会非常感激的。
下面是我的组件：
import React, { Component } from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';
import 'bootstrap/
浏览 2提问于2018-12-06得票数 1
回答已采纳
1回答
我正在为一个呈现FlatList的组件编写一些单元测试，我需要模拟一些动作，比如scrollTo和scrollToEnd。
谁知道我怎么才能做到这一点？
我正在使用Jest和Enzyme进行测试。
import React form "react";
import { FlatList } from 'react-native';
import { mount } from 'enzyme';
describe("<FlatList/>", () => {
const callback = jest.fn(
浏览 12提问于2019-08-12得票数 0
1回答
我在试图理解如何使用Jest测试react文件中方法的输出时遇到了问题。我是全新的这种风格的网页开发，所以任何帮助都是非常感谢的。
我有这样的js文件：
import * as React from 'react';
import 'es6-promise';
import 'isomorphic-fetch';
export default class FetchData extends React.Component {
constructor() {
super();
this.state = {
浏览 0提问于2018-11-19得票数 3
回答已采纳
1回答
进口反应从“反应”
const = ({bpArrays}) => {返回bpArrays.slice(-1).map((bpArray，index) =>)(
<div key={index} >
<p >Systolic Pressure: {bpArray.sysbp}</p><br/>
<p>Diastolic Pressure: {bpArray.diabp}</p><br/>
<p>Date: {bpArray.atDate}&
浏览 6提问于2022-01-17得票数 0
2回答
如何模拟反应-本地相机与玩笑？
、、、、
我正在尝试用测试模块
所以我有下面的package.json
{
"name": "app",
"version": "0.0.1",
"private": true,
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.j
浏览 4提问于2017-01-23得票数 7
回答已采纳
1回答
我在自学React，并开始测试。使用文档中推荐的内容...create-react-app，jest，jest library/react。我有一个呈现动态样式的组件，如下所示 const ScalingDiv = (props) => (
<StyledDiv size={props.size || 42}>
<OtherEl>
{props.text}
</OtherEl>
</StyledDiv>
); 我想验证一下我的逻辑是否正常工作(使用42作为备用大小)。
浏览 6提问于2019-09-24得票数 0
2回答
我正在开发一个React应用程序，我想测试一个模块，让我们称之为B，这取决于另一个模块，让我们称之为A。
这种情况可能是这样的：
moduleA.js
export function helperFn() {
return { prop1: 10, prop2: 20 };
}
moduleB.js
import React from 'react';
import { helperFn } from '../moduleA';
export class CustomComp extends React.Component {
render() {
浏览 0提问于2017-11-15得票数 9
回答已采纳
1回答
我正在尝试使用Jest测试Redux的React组件： // components/MyComponent/index.js
class MyComponent extends React.Component {
componentDidMount = () => {
const { someBoolean } = this.props;
if (someBoolean === false) {
this.props.myFunction().then(() => myHelperFunction());
}
}
render
浏览 20提问于2020-04-21得票数 0
我的应用程序中有一个功能如下：
import React from 'react';
import { useHistory } from "react-router-dom";
const Main: React.FunctionComponent<{ data: any[] }> = ({
data: result }) => {
const history = useHistory();
return (
<>
{result?.map(inner =&
浏览 6提问于2022-02-03得票数 0
2回答
如何正确测试反应元件？
、、、、
我不是单元测试方面的专家，我试图在我的虚拟todoapp项目上达到100%的覆盖率，这对于像TodoList组件这样简单的组件来说很容易，但是AddTodo组件呢？
import React, {PropTypes} from 'react'
import {compose, withState, withProps} from 'recompose'
/**
* Form to create new todos.
*/
const enhance = compose(
withState('value', 'setValue&#
浏览 4提问于2016-12-20得票数 1
回答已采纳
很抱歉，如果这个问题已经在其他地方得到了回答，这似乎是一个基本的问题，但我在任何地方都找不到答案。
我正在尝试找到一种方法，根据子组件的类型(即组件类型)，有条件地将道具传递给子组件。
例如，给定一个通用功能组件
const Parent = ({propA, propB, children, ...props}) => (
<div {...props}>
{children}
</div>
)
其中，我希望只接收A和B组件作为子组件。我希望只将propA传递给A类型的子项，将propB类型的子项传递给B类型的子项，以便
cons
浏览 26提问于2021-05-18得票数 0
我曾尝试过几篇关于如何做到这一点的文章，包括airbnb react-native和jest的酶指南(分别)。(例如：、或)
但每当我尝试渲染(不是挂载，而是崩溃)任何本机组件时，我都会收到很多警告(我有多组并发测试)。警告总是关于本机道具不被识别。
Warning: Unknown props `focus`, `secureTextEntry` on <TextInput> tag. Remove these props from the element.
in TextInput (created by TextInput)
in Te
浏览 5提问于2017-02-04得票数 5
2回答
如何正确测试反应元件？
、、、、
最近我正在学习用玩笑和酶来进行测试，我的代码似乎很难理解单元测试是什么。
import React from "react";
class App extends React.Component {
constructor() {
super();
this.state = {
value: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const value = e.target.valu
浏览 0提问于2017-06-30得票数 0
1回答
无法使用模块外的导入语句
、、、、
我尝试使用Jest测试TextField组件
text-field.test.js
import React from "react";
import { render, screen } from "@testing-library/react";
import TextField from '../text-field'
import "@testing-library/jest-dom";
test('TextField', () => {
render(<TextField name=&#
浏览 1提问于2020-08-22得票数 2
回答已采纳
当我挂载一个组件时，我得到了什么(浅层我没有得到这个错误)，我得到了下面的错误。
TypeError:无法读取未定义的属性“创建”
在(node_modules/@material-ui/core/CircularProgress/CircularProgress.js stylesOrCreator
。
。
。
还请将此错误放在顶部：
node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js Uncaught :无法读取未定义的属性“body2”
来自package.json的版本：
浏览 0提问于2020-07-27得票数 3
回答已采纳
我是一个新的react-native，我正在从服务器获取数据，并在数据的基础上更新我的UI元素，就像改变背景颜色或隐藏图像一样。为了实现这一点，我应该遵循什么方法，现在我正在尝试使用redux来实现，但不知何故无法更新redux中的特定项，因为在redux中我正在存储Json数据。我试着更新，但仍然没有运气来更新redux。
基本上，如果我从服务器自动获得任何数据，比如通知或其他数据，我想在每个屏幕上更新我的UI。
请帮助我决定更好的方法来实现这一点。
提前谢谢。
依赖关系：
"dependencies": {
"firebase": "^5.0
浏览 3提问于2019-05-14得票数 1
我正在尝试使用Jest、useEffect的酶和React钩子的useCallback来编写单元测试用例，但我无法成功。你能帮我为下面的代码写一个测试用例吗？ ModalComponent.jsx const ModalComponent = ({ closeModal }) => {
const handleModal = useCallback((event) => {
if (event.keyCode === 27) {
closeModal(false);
}
}
useEffect(
浏览 47提问于2020-07-12得票数 2
1回答
我在使用redux的useSelector钩子实现组件测试时遇到了很多困难。我已经看到了一些关于这个问题的问题，但我没有设法用这些问题的建议解决方案来解决我的问题。
我的组件相当大，所以我不会全部发布，但是给我带来麻烦的部分如下：
Total.tsx
import React from 'react';
import clsx from 'clsx';
import i18next from 'i18next';
import { useSelector } from 'react-redux';
import { Trans
浏览 4提问于2021-02-23得票数 0
我是测试react原生应用的新手。我从Jest开始，并运行了名为App-test.js的测试，该测试通过了，但我得到了引用错误:在Jest环境被拆除之后，您正在尝试import一个文件。 我试过了： jest.useFakeTimers(); 和 jest.useFakeTimers();
Date.now = jest.fn(() => 1503187200000); jestSetupFile.js import mockAsyncStorage from '@react-native-community/async-
storag
浏览 23提问于2019-05-08得票数 7
我只是学习Jest/酶的单元测试--特别是React/Redux。我正在尝试编写一个测试，从用户的角度进行检查(这是正确的方法吗？)如果模式显示后，单击某些链接。接下来，我想测试单击shade包装器在modal上是否关闭modal。
模态状态(开/闭)由Redux控制。
基于Redux的当前状态，模态得到了合适的样式：modal或invisibleModal.
我试图通过模拟Redux商店来实现它，但是我觉得它应该没有它--我想测试未连接的组件会更好，但是如果我错了，请纠正我。
到目前为止的测试：
const mockFn = jest.fn();
describe('Contact
浏览 0提问于2019-04-12得票数 7
回答已采纳
拥有这样一个简单的useQuery
const {
isLoading, isError, data,
} = useQuery(['courses', { userId: someUserId }], fetchDataFromBackendServer);
在我的单元测试中，我希望从一开始就获得useQuery返回信息(这是我想这么做的原因，但这不是主题)
describe.only('Title', () => {
beforeEach(() => {
jest.clearAllMocks();
浏览 2提问于2022-01-11得票数 -1
回答已采纳
1回答
在下面的代码中，我使用React、Jest和Enzyme来确认传入组件的属性值是否为已知值。测试中的组件由受控的输入元素组成。当我将其中一个测试值更改为测试失败时，收到的值返回为未定义，而不是不正确的值。我不知道为什么。我是否错误地测试了输入元素的值？
import React from "react"
import { shallow, mount, render } from 'enzyme';
import { MyAddressForm } from "../components/addressForm"
const testText
浏览 4提问于2018-11-17得票数 0
我可能在这里使用的词不对，但我有一个组件，它使用react-icons，特别是字体。
import { FaDog, FaHome, FaFileContract } from "react-icons/fa";
我把它们作为组件传递给一个子组件。
<SidebarBtn label="Home" linkTo="/" icon={<FaHome />}></SidebarBtn>
当我编写Jest单元测试时，我想确保那些响应图标组件被调用并传递到child...but，它似乎不像我想的那样通过。
const
浏览 3提问于2021-12-18得票数 0
我正在测试一个具有多个嵌套组件的React组件。我的测试旨在确保每个组件都得到正确的支持。其中一个组件应该传递一个onChange 函数，因此我尝试执行以下操作(在test()中)：
Jest +酶测试：
const props = {
onSomethingChange: jest.fn()
};
const component = shallow(<MyComponent {...props} />);
expect(component.find('SomeNestedComponent')
.prop('onSomethingChange&
浏览 1提问于2017-03-09得票数 4
回答已采纳
这就是组件的排列方式。
class A extends React.Component {
state = {mode: 'create'}
abstract getRows() {
}
abstract getTitle(){
}
}
class B extends A {
getTitle(){
if(this.state.mode === 'create'){ return 'New';}
else {return 'Existing'};
}
浏览 2提问于2022-03-04得票数 0
1回答
我正在跟踪RTL文档，并希望测试我的按钮组件。我似乎无法通过onclick考试。我已经模拟了onClick函数，但是我得到了下面的错误。
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@t
浏览 9提问于2022-11-26得票数 0
回答已采纳
我正在开发一个React本机应用程序。但是，它在控制台中给出了一个错误，如下所示：
FAIL src/features/dashboard/components/jest-tests/ExpandedInstanceSchedule.test.js (20.428 s)
ExpandedInstanceSchedule Component
√ update on event (357 ms)
√ renders corectly (138 ms)
× renders corectly (210 ms)
● E
浏览 3提问于2022-05-02得票数 -1
我有React hooks组件，它使用一个材质表来渲染数据。并且数据是从服务器获取的。我需要通过模拟Api调用来测试组件以查看表是否包含数据。下面是当前的代码。 dataPopulate.js-- import React, { useEffect, useState, useRef } from 'react';
import MaterialTable from 'material-table';
const dataPopulate = () => {
const [tableLoaded, setTableLoaded] = useState(
浏览 38提问于2020-06-22得票数 0
2回答
My组件，它拥有数据，并将其添加到<PointsLayer组件中：
import React, {Component} from 'react';
export class EventsMap extends Component {
constructor(props) {
super(props);
}
render() {
const data = this.props.data;
console.log("data in events map", data)
....
...
浏览 1提问于2022-01-20得票数 0
回答已采纳
我使用我们自己的库来进行API调用。在devDependencies中，我指定了该库。如果我运行npm install，我将获得node_modules下的库。在应用程序方面，它工作得很好。
当我尝试使用JEST时，我得到了意想不到的标记。
请在下面找到我的package.json，
{
"name": "myApp",
"version": "0.28.9",
"description": "My APP",
"main"
浏览 1提问于2019-01-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
