显示<ContextConsumer> [函数] </ContextConsumer>的console.log(Wrapper.debug())
这个问答内容涉及到React中的Context API和Enzyme测试库的使用。
首先，<ContextConsumer>是一个React组件，它用于消费Context中的值。在这个问答中，它被用作函数组件的标记。
console.log(Wrapper.debug())是Enzyme测试库中的一个方法，用于在控制台打印包装组件的调试信息。它可以帮助开发人员了解组件的结构和属性。
下面是一个完善且全面的答案：
<ContextConsumer>是一个React组件，用于消费Context中的值。它可以通过使用<Context.Consumer>来实现，其中Context是一个React Context对象。通过使用<Context.Consumer>，我们可以在函数组件中访问Context中的值。
console.log(Wrapper.debug())是Enzyme测试库中的一个方法，用于在控制台打印包装组件的调试信息。Enzyme是一个用于React组件测试的JavaScript库，它提供了一套简洁而强大的API来操作和断言React组件的行为和状态。Wrapper.debug()方法返回一个包含组件的调试信息的字符串，可以帮助开发人员了解组件的结构和属性。
在这个特定的代码片段中，我们可以推断出以下信息：
- 代码中存在一个名为
Wrapper的变量，它是一个被Enzyme包装的React组件。 Wrapper组件中包含一个名为<ContextConsumer>的子组件。Wrapper.debug()方法被调用，并将结果打印到控制台。
根据这些信息，我们可以得出以下结论：
- 这段代码用于测试
<ContextConsumer>组件的行为和状态。 Wrapper组件可能是一个包含<ContextConsumer>组件的父组件。- 开发人员可能希望通过调试信息来验证
<ContextConsumer>组件的正确渲染和属性传递。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云计算产品：https://cloud.tencent.com/product
- 云原生产品：https://cloud.tencent.com/product/cns
- 人工智能产品：https://cloud.tencent.com/product/ai
- 物联网产品：https://cloud.tencent.com/product/iotexplorer
- 移动开发产品：https://cloud.tencent.com/product/mobdev
- 存储产品：https://cloud.tencent.com/product/cos
- 区块链产品：https://cloud.tencent.com/product/baas
- 元宇宙产品：https://cloud.tencent.com/product/mu
相关·内容
我正在用酶开玩笑，并试图打印出wrapper.debug，但我没有得到输出，如开玩笑的文档。这里怎么了？我的测试文件：
import React from 'react';
import Enzyme, {shallow} from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import App from './../../components/App/App';
Enzyme.configure({ adapter : new Enzy
浏览 2提问于2019-01-18得票数 9
我正像往常一样为一个新项目做一些单元测试。我曾经以这种方式测试连接到redux的组件：
( a)存储生成器
import { createStore } from 'redux';
import rootReducer from '../src/reducers';
export const storeFactory = (initialState) => {
return createStore(rootReducer, initialState);
}
它由Input.test.js文件使用。
import React from 'r
浏览 0提问于2019-01-07得票数 19
回答已采纳
2回答
我想在mocha测试中使用多倍异步foo函数，并尝试这样做：
describe('This test', () => {
const foo = async () => {
const wrapper = mount(Component);
const button = wrapper.find('button');
button.simulate('click');
wrapper.update();
await new Promise(res
浏览 0提问于2020-09-01得票数 0
我的问题是：
--我使用react的context api <StateConsumer></StateConsumer>检索value.connected，以了解my是否已连接。我想用jest来模拟一个连接的用户.
我的代码是:
import React, { Component } from 'react';
import SignPage from '../Connection/SignPage';
import OgdpcQuery from '../Ogdpc/OgdpcQuery/OgdpcQu
浏览 1提问于2019-11-29得票数 0
回答已采纳
下面我尝试从enzyme实现enzyme，但发现wrapper.debug()是空的。
import {mount} from 'enzyme';
const Foo = () => <div>Sairam</div>;
describe(...
it(...
const wrapper = mount(<Foo/>);
console.log(wrapper.debug()) // gives empty value
更新：
import {
specs, describe, it,
bef
浏览 0提问于2019-03-26得票数 0
回答已采纳
1回答
容器用酶测试
、、、、
测试容器中存在的组件/元素是否有意义？
我有这个节点
<div className="App">
<input type="text" onChange={[undefined]} />
<button onClick={[undefined]}>
Add
</button>
</div>
但是为什么测试失败了？
const wrapper = shallow(<App />);
console.log(wrapper.debug())
expect(
wrapper
浏览 0提问于2018-12-11得票数 1
回答已采纳
当react组件有事件处理程序时，我无法通过使用.contain的测试。示例：
Foo.js
const Foo = React.createClass({
render () {
return (
<p onClick={() => {}}>I am not a very smart component...</p>
)
}
})
export default Foo
Foo.test.js
import React from 'react'
import
浏览 0提问于2017-09-10得票数 1
回答已采纳
我试图使用Dropdown访问带有name=genes属性的jest
beforeEach(() => {
const middlewares = [thunk]
const store = configureStore(middlewares)(STATE1)
wrapper = mount(
<Provider store={store} >
<SavedVariants match={INIT_MATCH_PROPS} {...stateProps} {...dispatchProps} />
浏览 2提问于2020-06-23得票数 2
1回答
我们有一个使用react-loadable加载的组件，在组件内部也有使用react-loadable加载的子组件。我在jest中遇到的问题是无法加载子组件，尝试了几个来自互联网的建议。请对此提供帮助，以下是必需的详细信息： lazyload.js import Loadable from 'react-loadable';
import Loader from './components/ui/genericComponents/Loader';
export const lazyload = (func, fallback) => {
retu
浏览 30提问于2020-06-15得票数 3
1回答
在<MyComponent>组件中，我使用 <MediaQuery>组件来区分呈现移动内容和桌面内容。
export class MyComponent extends React.Component {
//...
render() {
<MediaQuery query="(max-width: 600)">
<div className="inside-mobile">mobile view</div>
</MediaQuery>
浏览 0提问于2018-07-09得票数 2
我的应用程序最初在组件中使用加载占位符呈现，5秒后呈现不同的元素。我想用jest和酶来测试这个组件。 我的问题是，当我测试它和console.log(wrapper.debug())时，它只显示加载部分。 现在我的问题是如何对条件部分进行单元测试。 我的App.js import React,{useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
const [loading,
浏览 13提问于2020-11-17得票数 0
1回答
下面是我使用Jest/酶法测试“SearchBox”组件的测试脚本-
test('searchbox input!',()=>{
const wrapper=global.mount(<SearchBox onTextChangedFunc={dummyFunction}></SearchBox>)
const textBox=wrapper.find('#inputText')
textBox.simulate('change',{target:{value:'p12346997'}})
w
浏览 0提问于2019-04-10得票数 0
1回答
我正在设置单元测试，以测试与Jest和酶反应的成分。不知怎么的，我的装置运作得很奇怪。当被测试的组件在测试文件中时，一切都按其应有的方式工作，但是当它被导入时，它就没有了。
wrapper.debug()只输出作为输入提供给mount()的内容，而不是返回组件应该呈现的JSX。
测试中的组件(TestComponent.js)
import React from 'react';
export default class TestComponent extends React.Component {
render() {
return (
<di
浏览 2提问于2017-06-11得票数 2
回答已采纳
我有一个简化的render()方法：
render() {
return (
<React.Fragment>
<Router>
<div>
<Route path='/abc' component={Test} />
<Route path='/def' render={() => (
<d
浏览 8提问于2018-08-28得票数 2
回答已采纳
1回答
以下用jest和酶写的测试用例不起作用： it('Displays Trade component', () => {
console.log("Testing Shallow", wrapper)
expect(wrapper.find('Trade').length).toEqual(1);
}); 我使用console.log(wrapper.debug())对其进行了安慰，发现了以下内容： <Connect(Trade) tradeData={[undefined]} /> 现在如何识别组件？
浏览 16提问于2020-06-18得票数 0
回答已采纳
1回答
my-component.js
import axios from "axios";
import React from "react";
const UnitTest = () => {
const [todo, set_todo] = React.useState({});
React.useState(() => {
const onMounted = async () => {
const getTodo = await axios.get("https://jsonplaceholder.typ
浏览 5提问于2021-06-08得票数 2
回答已采纳
我有一个组件，它有这样的结构
return <Element>
{(a, b): React.ReactElement => (
...some elements here
)}
</Element>;
当我测试它的时候，我用debug得到了这个
<Element>
[function]
</Element>
我的问题是，进入这个函数以检查它返回的元素的方法通常是什么？
我的测试
import React from 'react'
浏览 0提问于2020-05-21得票数 2
2回答
我有一个简单的组件来切换排序。当单击一个链接时，它会触发一个函数。当我在上面运行shallow()时，我会得到一个错误，比如
错误:此方法仅用于在单个节点上运行。0找到
我的组成部分是：
import React, { Component, PropTypes } from 'react';
import { sortGames } from '../actions';
import { connect } from 'react-redux';
class SortList extends Component {
const
浏览 4提问于2016-09-25得票数 1
我想做验证onBlur。但是当我在开玩笑中测试它时，错误信息不会出现在第一个测试子句的第一个模糊中。然而，它出现在第二模糊在第二测试子句。
这里，我显示了DOM从第一和第二子句，我们可以看到错误信息显示在第2子句后，第二次模糊。
如何使错误信息出现在第一次测试子句中的第一个空白中？
反应文件
import React from 'react';
import { useForm } from 'react-hook-form';
import { string, object } from 'yup';
import { yupResolver
浏览 7提问于2022-06-30得票数 0
回答已采纳
我有一个简单的例子-ui ListItem (我鼠标移动)和一个包含另一个ListItem的material Popper，然后显示在onMouseOver事件上。这很好，但是我不能在相关的Jest/酶测试中复制这种行为。
这里用失败的测试来减少例子。
组件片段
export default function MyPopoutMenu() {
const [popoverAnchorElement, setPopoverAnchorElement] = useState(null);
const handleMouseEnter = event => {
con
浏览 0提问于2020-02-24得票数 2
回答已采纳
我的组件是用Memo包装的
const FamilyVariantTags = React.memo((
{ project, combineVariants, cloneToIllumina, variant, variantTagNotes, family, projectTagTypes, projectFunctionalTagTypes, dispatchUpdateVariantNote, dispatchUpdateFamilyVariantTags, dispatchUpdateFamilyVariantFunctionalTags, isCompoundHet, vari
浏览 0提问于2020-06-30得票数 0
1回答
有反应钩的单元测试失败
、、、、
我不明白我在这次单元测试中得到的结果。我希望对textField.valid的第二个检查是true，而不是返回false。
下面是我正在测试的组件的一部分：
export const FeedbackForm = ({ closeFunc }) => {
const [response, setResponse] = useState(false)
const [name, changeName] = useState('')
const [email, changeEmail] = useState('')
const [feedback
浏览 0提问于2020-12-17得票数 0
回答已采纳
2回答
当我使用jest和酶测试我的react项目时，我遇到了这个问题，` `TypeError: symbol不是一个函数
44 | test('PROVA', () => {
> 46 | const wrapper = mount(<I18nextProvider i18n={i18n}><MemoryRouter><LoggedSearch t={(k) => 'translate hardcoded'} userData={Artist}/></MemoryRouter></I
浏览 0提问于2018-06-07得票数 4
我有这样一个组件：
import React from 'react';
import classNames from 'classnames/bind';
import { connect } from 'react-redux';
import Topic from './components/Topics';
import AutoItem from './AutoItem';
import DataContext from "./dataContext";
const cx = cla
浏览 30提问于2019-08-08得票数 1
回答已采纳
我正在测试一个用酶和jest装饰了JSCC的组件，但是我收到了以下错误：
TypeError:无法读取未定义的属性“contextTypes”
如何测试这个样式的组件？
import React from 'react'
import { shallow } from 'enzyme'
import { PdfViewer } from './PdfViewer'
const baseProps = {
location: 'url',
defaultPage: 1,
classes: {},
han
浏览 1提问于2017-10-21得票数 1
回答已采纳
6回答
我的函数组件使用useEffect钩子从挂载上的API中获取数据。我希望能够测试获取的数据是否正确显示。
虽然这在浏览器中运行良好，但是测试失败了，因为钩子是异步的，组件没有及时更新。
实时代码：
App.js
import React from "react";
function getData() {
return new Promise(resolve => {
setTimeout(() => resolve(4), 400);
});
}
function App() {
const [members, setMembers] =
浏览 0提问于2019-07-12得票数 17
我正在为一个组件编写测试。它有一个下载按钮。我想测试一下调用这个按钮的onClick函数。但它不起作用。我的测试出了什么问题？
describe('download-button tests', () => {
let wrapper:any;
let _download = jest.fn(()=>{console.log('That`s Submit-button function')});
jest.mock('../components/CustomButtonComponent', ()=>
&l
浏览 0提问于2019-09-17得票数 0
1回答
我使用Jest和酶来测试我的反应应用程序。
我的文件夹结构看起来像
/src
- /\_\_test\_\_
- /LevelComponents
- OuterComp.test.js
- /components
- /LevelComponents
- OuterComp.js
- /Widgets
- ChenDropdown.js
OuterComp.js
import React, { Component } from 'react'
import ChenDropdow
浏览 6提问于2019-12-13得票数 5
1回答
我试图测试一个反应组件，它使用<ExpansionPanel />作为它的子组件与Jest和酶。
作为参考，console.log(wrapper.debug())如下所示：
const wrapper = shallow(<SomeComponent/>);
console.log(wrapper.debug());
<Fragment>
<WithStyles(ForwardRef(ExpansionPanel)) defaultExpanded={true}>
<WithStyles(ForwardRef(Expansi
浏览 4提问于2020-01-23得票数 4
我正在尝试测试在运行变异后应该用新数据更新的组件。我在下面发布了示例代码。你可以在上找到它。
不幸的是，在突变之后，我没有找到一种方法来实际更新MockedProvider的存储数据。当您运行测试时，您可以看到变化正在执行，并且组件在此之后被呈现。但是，由于突变不会做任何事情，所以没有添加新的todo项。
有人能告诉我在使用MockedProvider时如何使用突变来更改数据吗？
测试查询和突变：
const TODOS_QUERY = gql`
query todos {
todos {
title
}
}
`
const ADD_TODO_MUTATI
浏览 1提问于2018-10-18得票数 3
1回答
我添加了一个组件，它使用函数作为子函数。我对这个成分做了浅层酶测试，结果停止了工作。
如何浅显地测试正在使用函数作为子组件的组件？
组件
return (
<I18n>
{({ i18n }) => (
<div />
)}
</I18n>
)
我试过的测试
import { shallow } from 'enzyme';
wrapper = shallow(<Component />)
.find('I18n')
.children();
console.lo
浏览 1提问于2018-09-17得票数 4
回答已采纳
1回答
嗨，我试着模仿下面的React组件：
<Component content={data || {}}>
{() => <ChildComponent/>}
</Component>
我在模拟中编写了下面的模拟
import React from 'react';
const ComponentToMock = () => <div>A mock</div>;
export default ComponentToMock;
现在在我的测试文件中我写了
jest.mock('prese
浏览 0提问于2018-11-02得票数 0
我有一个React组件，它使用回调引用来存储对DOM元素的引用，这样它就可以动态地添加样式。我想做个测试来检查是否添加了样式。
我该怎么做？我可以看到，设置样式的方法被调用，并且看起来像预期的那样工作(因为它记录了一个数字)。但是，当我记录wrapper.debug()时，我看不到任何样式属性。
为我的第二个it()函数添加测试的正确方法是什么？
/*
* Component I want to test
*/
import React from 'react';
class DomStyleTest extends React.Component {
浏览 0提问于2018-04-12得票数 0
回答已采纳
为应用程序编写一些单元测试，并在描述块中碰壁。
/* eslint-env mocha */
const React = require('react')
const chai = require('chai')
const { expect } = chai
const Search = require('../js/Search')
const ShowCard = require('../js/ShowCard')
const enzyme = require('enzyme')
const { shallo
浏览 3提问于2016-12-05得票数 1
回答已采纳
1回答
我有两个组件，一个是父组件，另一个是作为renderProp传递的孩子
export class Kid extends Component {
render() {
const { age, name } = this.props;
return (
<div className="kid">
<span className="age">age: {age}</span>, name: {name}
</div>
);
}
}
export
浏览 2提问于2021-03-10得票数 0
回答已采纳
1回答
我在用酶和Jest测试材料UI表时遇到了问题。问题是模拟单击Tab组件。
我已经尝试过材料浅层法(createShallow)和酶的浅层法，但结果是一样的。
Tab组件上的console.log正在返回目标元素：
<WithStyles(Tab) label="Tab one" />
这是我的代码：
const setup = (newProps) => {
const props = {
selected: 0,
changeTab: jest.fn(),
...newProps
}
const wrapper =
浏览 1提问于2018-08-30得票数 2
如果这是副本，我很抱歉，但我还没有找到答案。我正在尝试测试一个呈现react-bootstrap组件的功能组件。冒烟测试运行良好，但尝试测试它是否渲染了正确的子对象一直很棘手。我一直按照文档中的说明进行浅层渲染，但是我的包装器返回:即使wrapper.debug()返回：ShallowWrapper {}：
<div id="header">
<Navbar color="faded" tag="nav" expand={false}>
<NavbarBrand id="logo" h
浏览 12提问于2019-11-05得票数 1
回答已采纳
1回答
我有一个连接的组件，我正在尝试测试，我导入了两个操作，它们向商店发送一个调用。我正在尝试测试的实际按钮单击应该在css类之间切换。
当我在测试中模拟单击时，我会得到一个错误，即由click事件触发的操作之一不是函数。
TypeError: setLikedProducts is not a function
13 |
14 | const handleLike = () => {
> 15 | return like ? (setLike(false), removeLikedProduct(product)) :
浏览 4提问于2020-02-29得票数 0
回答已采纳
1回答
所以，当我使用酶测试一个使用css模块的组件时，我遇到了一些问题。或者我该说filename.module.scss
当我做这样的事情时，会发生什么：
const wrapper = shallow(<MyComponent {...data}/>);
console.log('wrapper = ', wrapper.debug());
我的调试工作，并显示了我的组件结构与我的所有div在那里。问题是，我的风格中没有一个添加了durning运行测试。但是当我运行Gatsby开发时，样式就增加了。，所以只在测试模式下才清楚，我没有看到添加到组件中的样式！
MyCom
浏览 1提问于2018-09-02得票数 2
3回答
我有一个组成部分：
import React from 'react';
import * as styles from './RedComponent.css';
class RedComponent extends React.Component {
render () {
return <div className={ styles.red }></div>;
}
}
这是测试用例：
describe('Test suite', () => {
test('RedComponent
浏览 2提问于2017-11-14得票数 6
回答已采纳
1回答
目前，我正在构建一个想要测试的组件。该组件由以下部分组成：
<Fragment>
{!error ? (
<template-that-gets-injected-with-content-if-successful />
) : (
<error-message-goes-here />
)}
<noscript>...</noscript>
</Fragment>
组件启动时没有出现错误。它有一个useEffect钩子，它将发出一个fetch请求，执行一些
浏览 0提问于2020-08-15得票数 0
9回答
因此，我正在为项目组件编写一个测试，我尝试呈现ItemCard组件，然后使用该包装器创建快照，但它返回一个空的ShallowWrapper {}
有关更多信息，请参见代码：
Item.test.js
import { shallow } from 'enzyme';
import { ItemCard } from '../Item';
const fakeItem = {
id: 'aksnfj23',
title: 'Fake Coat',
price: '40000',
descriptio
浏览 1提问于2019-01-29得票数 35
回答已采纳
我正在使用enzyme和jest来测试一个应用程序，该应用程序在安装后一定时间后更新state和DOM (使用setTimout())。但是，我如何确保时间已经过去，并执行检查？
我试着使用jest.advanceTimersByTime()，但它给了我一个警告。Warning: An update to %s inside a test was not wrapped in act(...).，所以我就这么做了，但还是没什么改变。
const someComponents = () => {
return (<div className="child">
浏览 0提问于2019-04-13得票数 1
1回答
我有以下内容：
export default function Button({ className, children, ...otherProps }) {
return (
<button className={'button} {...otherProps}>
{children}
</button>
);
}
在父组件中，我在内部传递了这样的道具和标记：
<Button className={test-button} onClick={this.removeItems} >
<i class
浏览 0提问于2019-05-26得票数 2
回答已采纳
1回答
我无法理解元素中的test是如何正确呈现的。我写了这样一个测试： const props = {
type: 'test_plan',
renewal: '25.06.2019',
subscriptionName: 'Test',
};
test('test component elements render', () => {
const wrapper = mount(<Component {...props} />);
console.log(wrapper.debug
浏览 20提问于2019-05-24得票数 2
回答已采纳
我知道“动作必须是纯对象，异步动作使用自定义中间件”。已经被问过很多次了，但是我找不到解决办法。 这个问题只发生在酶测试中。 这是我的componentDidMount，它记录响应： componentDidMount () {
this.props.dispatch(fetchUsers())
.then(response => console.log(response))
} 日志响应:用户：(27) {…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{
浏览 14提问于2019-05-23得票数 15
回答已采纳
1回答
我有以下组件： import React from 'react';
import {
Header
} from 'semantic-ui-react';
import SummaryTable from '../SummaryTable/SummaryTable';
import SummaryFilters from '../SummaryFilters/SummaryFilters';
function TabSummary() {
return (
<>
<Header
浏览 9提问于2020-04-06得票数 0
回答已采纳
1回答
我想知道反应片段是否与酶的快照兼容。现在看来，来自React 16+的片段在酶的shallow()方法中被呈现为符号，这会导致转换错误："TypeError: Cannot convert a Symbol value to a string"。
这是我的测试：
it('should render successfully', () => {
const wrapper = shallow(
<Sections
data={mappedMockData}
sections={mappedMockData.secti
浏览 2提问于2017-12-15得票数 5
回答已采纳
我正在试着测试一个Menu是否呈现为MenuItems
import React from "react";
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { mount } from "enzyme";
configure({ adapter: new Adapter() });
const MenuItem = ({ children }) => <li>{children
浏览 0提问于2018-10-05得票数 1
回答已采纳
2回答
我一直在尝试找到一种方法来在一个简单的tsx文件上获得100%的覆盖率，jest告诉我需要覆盖率的只有两行代码是我传递了一个从useState执行setState的回调的地方。 我读到我不应该测试钩子，因为用户只关心UI。这就是为什么我的问题是如何测试这两行代码。 function App(): JSX.Element {
const [step, setStep] = React.useState(0);
return (
<main className={style.app}>
<Grid className={style.header} c
浏览 27提问于2021-05-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
