React +酶-无法在功能组件中找到任何内容
React是一种用于构建用户界面的JavaScript库，而酶（Enzyme）是React的一个测试工具库。在React中，有两种主要的组件类型：类组件和函数组件。在功能组件中，我们使用函数定义组件。
根据给出的问答内容，我们可以推断出问题是关于在功能组件中使用React和酶遇到的问题。以下是对该问题的完善且全面的答案：
问题：React +酶-无法在功能组件中找到任何内容
回答：在功能组件中无法找到任何内容的原因可能有几个可能的原因。以下是一些常见的解决方法和可能的原因：
- 导入错误：确保正确导入React和酶的相关模块。在功能组件中，你需要导入React和酶的必要模块，例如：
import React from 'react';
import { shallow } from 'enzyme';- 组件命名错误：检查组件的命名是否正确。在React中，组件名称必须以大写字母开头，否则React将无法正确识别组件。
- 缺少内容：在功能组件中，你需要返回一个React元素或组件。确保你在组件中返回了内容，例如：
function MyComponent() {
return (
<div>
这是我的功能组件内容
</div>
);
}- 错误的使用方式：确保你正确使用了酶的测试方法。酶提供了各种测试方法，例如
shallow用于浅渲染组件，mount用于完整渲染组件。根据你的需求，选择适当的方法来测试你的组件。 - 版本不兼容：如果你使用的是React或酶的旧版本，可能会导致一些兼容性问题。确保你使用最新版本的React和酶，并检查它们之间的兼容性。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品介绍：https://cloud.tencent.com/product
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云CDN：https://cloud.tencent.com/product/cdn
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
请注意，以上链接仅为腾讯云相关产品的示例，你可以根据实际需求和场景选择适合的产品。
相关·内容
用于反应测试的酶、ReactTestUtils和反应测试库有什么区别？
ReactTestUtils文档说：
ReactTestUtils使在您选择的测试框架中测试反应组件变得容易。
酶的文件只是说：
酶是一种用于React的JavaScript测试工具，它使断言、操作和遍历反应组件的输出变得更容易。
反应-测试-库文件：
反应测试库是一个非常轻的解决方案，用于测试反应元件.它提供了轻的实用功能之上的反应-多玛。
为什么每一种解决方案实际上都比较容易，而另一种解决方案却无法实现？
浏览 6提问于2019-01-11得票数 88
回答已采纳
1回答
我试图在酶单元测试中检查我的成分的默认状态。为此，我有以下组件：
import React, { Component } from 'react';
class Picker extends Component {
constructor(props) {
super(props);
this.state = {
sources: true
};
}
}
...
export default Picker;
最后，我的单元测试如下所示：
it('should contain `
浏览 1提问于2017-12-28得票数 8
3回答
我写了一个有趣的酶测试如下：
import React from 'react';
import ManageDrugTermPage from '../js/manageDrugTermPage.jsx';
import toJson from 'enzyme-to-json';
describe('manage drug term page test suite', () => {
it('snapshot test', () => {
const setRouteLeaveHook =
浏览 1提问于2017-05-17得票数 6
回答已采纳
我有一个<Parent/>组件，当我添加/删除/更改它的<Child/>组件时，我想使用酶来测试它的行为。例如，更改
<Parent>
<Child />
</Parent>
至
<Parent>
<Child />
<Child />
</Parent>
我正在使用一个操作DOM的第三方库，所以我需要跟踪孩子，以保持React和库的同步。
我多次尝试调用mount，尽管这两个mount调用创建了两个不同的实例。例如,
let constructorCalls = 0;
le
浏览 1提问于2017-04-18得票数 1
使用jest和酶在react中编写单元测试。在检查组件状态时，它抛出错误"ReactWrapper:: state ()仅能在类组件上调用“。 import React from 'react';
import { mount } from 'enzyme';
import expect from 'expect';
import CustomerAdd from '../CustomerAdd'
import MUITheme from '../../../../Utilities/MUITheme';
浏览 27提问于2019-10-17得票数 4
回答已采纳
1回答
带反应弹簧/反应运动的快照测试
、、、、
我试图用Jest和酶来测试我的反应成分。有些组件中有动画组件(从react-spring/react-motion导入)，它将函数呈现为其子函数。这使得测试变得非常困难。我做了很多研究，想出了三个想法：
使用酶的mount渲染一切，并对其进行快照测试。我发现昂贵的组件是不可能的/无效的，生成的快照通常很重(1MB - 2MB)。
用酶的shallow和快照测试组分。然后找到动画组件，使用酶的renderProp()渲染里面的子组件，并对它们进行快照测试。在我发现renderProp()与<StaggeredMotion />的react-motion和react-sprin
浏览 0提问于2018-12-28得票数 2
回答已采纳
我正在使用jest和酶来构建这个测试，但是在构建它的时候我遇到了这个错误。
这就是测试
import React from 'react';
import { shallow, render } from 'enzyme';
import Title from './../';
describe('Title', () => {
it('should render correctly', () => {
const TitleDOM = render(<Title />);
浏览 0提问于2017-11-22得票数 4
6回答
目前，我正在使用带有react钩子的功能组件。但是我无法完全测试useState钩子。考虑这样的场景，在useEffect钩子中，我正在做一个API调用并在useState中设置值。对于jest /酶，我有要测试的模拟数据，但我无法为jest中的useState设置初始状态值。
const [state, setState] = useState([]);
我想在jest中将初始状态设置为对象数组。我找不到任何类似于类组件的setState函数。
浏览 7提问于2019-07-14得票数 34
我有一个带有模态对话框的Reaction组件(使用reactstrap，但其他人也报告了类似的问题react-bootstrap以及其他类型的模态部件)。酶在模态中找不到任何成分，即使它们在实际的应用程序中呈现得很好。最起码的例子： import React from 'react'
import { Modal } from 'reactstrap'
export default class MyModal extends React.Component {
render() {
return (
<
浏览 165提问于2018-06-08
回答已采纳
1回答
我对React测试和Jest和酶都是新手。我正在尝试首先学习如何使用TDD方法，因此，我正在开始编码之前构建我的测试。我所做的是在React中创建了一个示例应用程序，并安装了酶依赖性，然后我编写了测试：
import { shallow } from "enzyme";
import React from "react";
import AppLayout from "./AppLayout";
import { ContentLayout } from "./styles";
it("renders <AppLa
浏览 2提问于2020-04-24得票数 1
当我挂载一个组件时，我得到了什么(浅层我没有得到这个错误)，我得到了下面的错误。
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
回答已采纳
概述：
在使用酶测试之前，我重构了脚本测试，但现在，我想使用@ test -library/react。
问题：
我在@react library/react中找不到setState的解决方案
浏览 0提问于2019-07-06得票数 16
回答已采纳
我在导出React类组件并在酶中使用它时遇到了问题，因为它是作为函数类型导出的： class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
...
}
export default connect(null, mapDispatchToProps)(MyComponent);
export const MyComponentRaw = MyComponent 接下来，当我尝试在酶中使用它时： import {MyComponentRaw} from "../../MyC
浏览 16提问于2019-09-06得票数 0
使用React Native、jest和enzyme，我甚至无法检查浅呈现组件的值，更不用说对其运行测试断言了。
酶和jest在其他测试文件中工作得很好。
在我的控制台中没有任何错误发生的日志输出。
import React from 'react';
import { shallow } from 'enzyme';
import { SomeComponent } from '../SomeComponent';
describe('SomeComponent', () => {
it('renders&#
浏览 1提问于2018-04-27得票数 1
我对测试非常陌生。 假设我有一个下面的组件 export default function ResolutionCount({ componentUsedIn }) {
const dispatch = useDispatch();
const userID = useSelector(
(state) => state.userInfoReducer.userInfo[0]["user_id"]
);
useEffect(() => {
dispatch({
type:
浏览 17提问于2020-09-23得票数 0
我正在更新一个单元测试，在jest和酶上的一个反应组件，并遇到一个问题。
我最近添加了一个子组件(它本身连接到Redux)到父组件中，它使用的是酶的‘挂载’，单元测试失败了。
注意，该项目编译并运行良好。
这是CLI上的错误：
不变违规:无法在"Connect("ChildComponent名称此处“)的上下文中找到”存储“。或者将根组件包装在连接选项中，或者将自定义的React提供程序和相应的React使用者传递给connect选项中的Connect("ChildComponent名称此处“)。
我已经确认Redux连接的子组件导致了这个问题。
是否可以在此实例中模
浏览 2提问于2019-09-23得票数 2
3回答
我在用玩笑和酶做单元测试。我有与钩子连接的组件。我调用redux操作来加载数据。
import React, {useEffect, useState, useCallBack} from "react";
import {connect} from "react-redux";
import CustomComponent from "../Folder";
import { loadData, createData, updateData } from "../../redux/actions";
const Accoun
浏览 2提问于2021-06-10得票数 3
1回答
我是新来的反应和玩笑，我现在不使用酶
我面临的错误是没有过载匹配此调用。“2中的重载1”(道具:XProperty\ Readonly )：BuildingUnit，给出了以下错误。类型'{}‘中缺少以下属性: ab，cd重载2的2，’(道具: XProperty，上下文:任何)：BuildingUnit'，给出了以下错误。类型“{}”缺少“Readonly”类型中的下列属性: ab，cd
类BuildingUnit:
type XProperty= { ab, cd};
type YProperty= {ef, gh};
class
浏览 13提问于2021-10-25得票数 0
1回答
我正在用玩笑和酶测试我的成分。我想在加载整个页面时加载我的组件，所以我在useEffect中使用load事件，下面是我的代码
const RatingsAndReviews = (props: RatingsAndReviewsProps) => {
const [pageLoaded, setPageLoaded] = useState<boolean>(false)
const handleLoad = () => {
if (document.readyState === 'complete') {
setTimeout((
浏览 4提问于2022-04-21得票数 1
回答已采纳
1回答
我需要访问内部组件的状态，要使其活动以供单击事件使用，我的问题是在使用mount时酶不允许这样做，这只能通过shallow呈现酶来实现，就像在上提到的那样，正如前面提到的，我尝试使用来获取表单组件，然后再从表单中获取我需要达到的Button组件，问题是我的测试用例持续失败，因为表单组件的长度为零。
酶: 3.1.0
酶-适配器-反应-15: 1.0.1"
我是的新手，任何帮助都将不胜感激，谢谢
contactus.test.js：
test('It should simulate submit action ', ()=>{
let contactUs =
浏览 2提问于2017-11-23得票数 6
回答已采纳
2回答
我正在使用React中的功能组件，我需要为功能组件中的方法编写单元测试用例。
import React from 'react';
function print(){
console.log('hello');
}
function Welcome(props){
return <h1>{props.name}</h1>;
}
export default Welcome;
在jest和酶中：
test (method print , ()=> {
const container = shallo
浏览 19提问于2020-06-02得票数 0
我有一个带有模式对话框的React组件(使用reactstrap构建，但其他人也报告了react-bootstrap和其他类型的模式组件的类似问题)。酶找不到模式中的任何组件，即使它们在实际的应用程序中渲染得很好。最小示例：
import React from 'react'
import { Modal } from 'reactstrap'
export default class MyModal extends React.Component {
render() {
return (
<div c
浏览 43提问于2017-08-12得票数 8
回答已采纳
4回答
我正在尝试使用酶来测试组件的方法。我知道最典型的方法是使用酶的instance()方法。
问题是，这只适用于root组件，我的组件需要在两个上下文提供程序(即react-router和apollo客户端)中进行包装才能呈现。
const wrapper = mount(
<ApolloProvider client={client}>
<MemoryRouter initialEntries={["/login"]}>
<AuthFormContainer />
</MemoryRou
浏览 0提问于2018-06-09得票数 7
以下是我的反应部分：
import React from 'react'
var PageLeftLower = React.createClass({
render:function(){
return(<a href="#">Quote Requests</a>);
}
});
module.exports = PageLeftLower;
所以，非常简单的反应成分。我刚刚开始测试使用酶和摩卡，并编写了以下代码。
import expect from 'expect';
import React f
浏览 1提问于2016-08-02得票数 1
2回答
我有反应成分。让我们说东渡
import React, { Component } from 'react';
import injectSheet from 'react-jss';
class Todo extends Component {
// methods that incl. state manipulation
render() {
const { classes } = this.props;
return (
<div className={classes.c
浏览 3提问于2017-07-23得票数 1
嗨，我试着用酶测试这个反应应用程序，但是它引发了一个错误TypeError:适配器不是构造函数，任何想法都可以。
这是我的测试文件
从‘./ ProductRow _row’导入反应；从‘React’导入反应；//从‘酶’导入{react}；从‘酶’导入*作为酶；从‘酶适配器-react 16’导入*作为适配器；从‘enzyme.configure({适配器:新适配器() })；测试(‘TodoComponent呈现其内的文本’，() => { const包装= enzyme.mount( <ProductRow item={}{} quickView={[]} productP
浏览 1提问于2018-04-13得票数 18
回答已采纳
我刚开始做酶测试，我制作了一种成分如下：
import React from 'react';
import {
compose,
withState,
withHandlers,
branch,
pure,
renderComponent,
} from 'recompose';
import Fields from './components/Fields';
import Flow from './components/Flow';
export const MODE = {
preview:
浏览 4提问于2017-09-06得票数 7
回答已采纳
我一直在尝试使用酶浅渲染来模拟onPress。但是，由于react-intl的原因，我无法访问TouchableOpacity
我见过用于将intl注入react组件的助手函数，但这些函数似乎只适用于React，而不适用于react-native。
it("should handle button presses", () => {
const onPress = sinon.spy();
const button = shallow(
<IntlProvider locale='en'>
<ButtonApp
浏览 0提问于2017-05-30得票数 0
2回答
我设计了一个react组件，它包含一个只能被设置的输入字段，因此必须是readOnly，但是无法确定如何测试这个输入在酶中是否是readOnly。
我找不到关于readOnly属性的任何信息，但是有人提出了类似于的问题。从这一点看，我似乎需要使用类似下面的代码。
test('select button select input must be read only', () => {
expect(select.find('div').find('div').find('input').hasAttribute(
浏览 1提问于2018-09-13得票数 3
回答已采纳
1回答
我有一个父母和一个孩子。
父组件：
const ParentComponent = () => {
const click_button = (role) => {
document.getElementById(role).innerHTML = role;
}
return (
<div>
<ChildButton id= 'button_child' name='button_1' onClick={() => {
浏览 2提问于2021-03-18得票数 0
回答已采纳
1回答
我正在尝试测试是否向组件传递了正确的属性。在酶中，它很容易做到： const control = enzyme.mount(<Test />);
expect(control.find(<CompToTest />).props().MyProp).toEqual(expectedProp); 如何使用react-testing-library实现相同的结果？谢谢。
浏览 6提问于2019-05-07得票数 1
1回答
我使用jest和酶来测试我的组件。如果我有以下类组件
import React, { Component } from "react";
export class Test extends Component {
state = {
isLoading: false,
};
onClick = () => {
this.setState({ isLoading: true });
};
render() {
return (
<div>
<button onClick={this
浏览 0提问于2021-03-17得票数 1
2回答
问题:当我运行代码时，SVG会附加到组件上的外部div，并完美地呈现在页面上。但是，在测试期间，SVG不会附加到外部div。
堆栈：，我正在尝试使用Jest/酶法测试包装在反应组件中的d3js元素。
研究到目前为止：查阅了大量关于使用谷歌测试d3js和堆栈溢出的指南/帖子。使用d3js单元测试指南，并与茉莉花进行反应。我也读过用酶测试第三方库可能很困难，所以这可能是测试框架的一个限制。
我已经包含了要测试的代码的基本示例。
组件：
import React from "react";
import * as d3 from "d3";
export defau
浏览 0提问于2019-03-11得票数 7
我们目前正在用酶的浅渲染功能测试我们的反应应用程序。每个组件都是隔离测试的，所以我理解为什么这被称为“单元测试”。
我们正在向渲染组件的方向发展，它是子组件。您可以使用酶的挂载功能或React测试库来实现这一点，因为它从不浅显。这也意味着如果Redux是一个连接的组件，我们必须模拟它。
这种测试的名称是什么？我听说过它叫做“集成测试”，但是当我在工作中这么说的时候，人们认为我的意思是其他的东西。它是否仍然是一种“单元测试”，尽管多个组件是一起测试的？
浏览 0提问于2019-07-18得票数 2
回答已采纳
我用Jest和酶对我的应用程序进行单元测试。我以前是这样测试的：
const textFieldWrapper= shallow(<TextField label="Standard" />);
expect(textFieldWrapper.find('input').length).toEqual(1);
现在，返回的DOM似乎是：
<ContextConsumer>
[function]
</ContextConsumer>
我再也无法访问输入信息了。
我的问题是，如何使用这个新呈现的DOM?来访问输入值？
pac
浏览 0提问于2018-09-19得票数 2
回答已采纳
1回答
我想在我的react组件中做一个模拟函数的测试，例如我有：
const app=()=>{
const [state,setState]=useState("");
const func=(item)=>{
setState(item)
}
return(
<div>{state}<div/>
)
}
我想用玩笑和酶来测试这个叫做"func“的函数，这个例子是：
let wrapper=mount(<App/>)
test("testing",()=>{
let it
浏览 3提问于2020-05-09得票数 0
回答已采纳
2回答
我已经编写了一个简单的React组件来呈现<iframe>
export class Iframe extends React.component {
render() {
return <iframe src={ this.props.src } />;
}
}
我尝试通过检查<iframe>中是否正确填充了用src加载的内容来对其进行测试。为了做到这一点，我尝试访问frame.contentWindow，但是在用酶挂载它之后，它总是返回undefined。
我试着用Sinon 模拟<iframe>内容
serve
浏览 0提问于2017-01-04得票数 14
1回答
我刚开始使用React-Jest-Enzyme，进行测试，但从我收集到的所有信息来看，在我看来，大多数测试实际上都是测试React库是否坏了，而不是我的实际业务逻辑。
我给你举几个例子，如果我错了，请纠正我：
快照测试：
这个策略是怎么回事？
据我所见，它的主要目的是捕捉代码中任何不必要的更改。它“调整”了我的组件树，只注意到是否添加了新的换行符/字符，对吗？
所以它主要用于那些我可以不小心按下键盘的箱子？或者是别人不小心弄乱了我的代码？
酶的坐骑/浅和Jest‘s
我看到的解释您使用方式的大多数示例如下所示：
const wrapper = mount(<MyComponeny /&g
浏览 1提问于2018-02-21得票数 11
2回答
我不能得到答案，为什么不能使用jest和react-testing-library在react中访问函数组件中的方法。 我试过用酶，但我发现一切都变成了RTL。 import React from "react";
const simpleComponents = (props) => {
const simpleMethod = () =>{
// method logic
};
return <h1>test</h1>;
};
}
export default simpleCom
浏览 19提问于2020-04-19得票数 1
使用AirBnB的酶，我们可以对一个组件进行setState： const loginComponent = shallow(<Login />);
loginComponent.setState({ error: true }); 我想用react-testing library做同样的事情。 谢谢!
浏览 20提问于2019-01-09得票数 5
假设我有一个简单的组件，如下所示。
import React, { useState } from "react";
const Counter = () => {
const [counter, setCounter] = useState(0);
const incCounter = () => {
setCounter(counter + 1);
};
return (
<>
<p>Counter value is: {counter}</p>
<butto
浏览 0提问于2019-12-25得票数 8
回答已采纳
现在测试React Native组件的首选方法似乎是使用mocha、react-native-mock和酶的组合来浅层呈现组件。
问题是，浅层渲染只深入一层，有时组件的嵌套视图需要您测试额外的一层或两层。
理论上，酶支持mount()来完全呈现组件，但实际上这是失败的，因为。
考虑到这些限制，人们如何测试超过一个呈现级别的组件？
浏览 14提问于2016-08-03得票数 10
回答已采纳
我正在尝试使用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
我正在尝试使用Jest为react类编写测试用例，在material中使用frameworks.My react类使用卡类。我的部分代码是这样的。
<Card>
<CardHeader
avatar = {<div className={classes.imgHolder}><img src='/opt/imgs.png'/></div>}
actions = {<div/>}
title = {<div/>}
/>
<
浏览 0提问于2019-05-13得票数 0
回答已采纳
我有一个当前用withRouter包装的组件(例如，我使用export default withRouter(myComponent))，因为我需要使用history.push作为我在组件中的一个链接。我正在用酶编写一个测试，测试当用户单击组件中的按钮时，它是否会将状态更改为true/false。测试失败，错误为无法读取null的isExpanded的属性。这是我的测试结果：
import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { mount, conf
浏览 0提问于2019-11-21得票数 1
我试图升级以响应16+，而我现有的单元测试失败了。应用程序运行良好，只有单元测试失败。
连接-组成部分：
const componentsWrapper = (Components, selectData) => {
class BaseComponent extends Component {
constructor(props) {
super(props);
this.state = {
saveMode: false,
updateMode:
浏览 1提问于2020-01-16得票数 1
回答已采纳
2回答
我从myDomNode.html();得到这个html
<div aria-expanded="true"> {{someChildren}} </div>
在我的测试中，我想检查aria-expanded是否设置为true。
对于酶2.x和react 15.x，这是有效的：expect(myDomNode.attr('aria-expanded')).toBeTruthy();，但是在将react更新为16.x和3.x之后，我在更新后得到了一个错误，即值是未定义的。我在文档中找不到任何有用的提示。
我得到了这样的myDomNode：
c
浏览 3提问于2017-10-02得票数 2
回答已采纳
1回答
我试图用浅渲染器用酶测试HoC，但我一直收到以下警告：Warning: React.createElement: 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 { shallow } from 'enzyme';
const testHoc = Wrapp
浏览 0提问于2018-07-30得票数 0
回答已采纳
我使用的酶测试在创建-反应-应用程序。在shallow呈现中，它可以正常工作，但是mount呈现会引发错误：
TypeError:无法读取未定义属性的“收藏夹”
测试文件如下所示：
import React, { Component } from "react";
import configureMockStore from "redux-mock-store";
import { shallow, mount } from "enzyme";
import { Provider } from "react-redux";
浏览 0提问于2018-06-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
