为什么酶“挂载”包装器只呈现<ul>标记，而不呈现其他标记？
酶“挂载”包装器只呈现<ul>标记，而不呈现其他标记的原因是因为<ul>标记是用于创建无序列表的HTML标记。在HTML中，<ul>标记用于定义一个无序列表，其中的每个列表项使用<li>标记表示。当酶“挂载”包装器时，它会将<ul>标记作为一个整体进行处理，并将其转换为相应的HTML元素，以便在浏览器中正确显示无序列表。
<ul>标记的优势是可以清晰地表示出列表项之间的关系，使得内容更加有序和易于阅读。它可以用于各种场景，例如展示产品特点、列举步骤或指南、显示评论或反馈等。
对于酶“挂载”包装器，腾讯云没有直接相关的产品或产品介绍链接地址。酶“挂载”包装器是一种前端开发技术，用于将React组件渲染到DOM中。腾讯云作为云计算服务提供商，主要提供云计算基础设施、云存储、人工智能等相关产品和服务。
需要注意的是，酶“挂载”包装器只是前端开发中的一种技术，与云计算领域的其他技术和概念没有直接的关联。云计算领域涉及的技术和概念非常广泛，包括云计算基础设施、云存储、云安全、云原生、容器技术、大数据处理、人工智能等等。如果您对云计算领域的其他技术和概念有兴趣，我可以为您提供更详细的解答。
相关·内容
1回答
我刚开始使用React-Jest-Enzyme，进行测试，但从我收集到的所有信息来看，在我看来，大多数测试实际上都是测试React库是否坏了，而不是我的实际业务逻辑。
我给你举几个例子，如果我错了，请纠正我：
快照测试：
这个策略是怎么回事？
据我所见，它的主要目的是捕捉代码中任何不必要的更改。它“调整”了我的组件树，只注意到是否添加了新的换行符/字符，对吗？
所以它主要用于那些我可以不小心按下键盘的箱子？或者是别人不小心弄乱了我的代码？
酶的坐骑/浅和Jest‘s
我看到的解释您使用方式的大多数示例如下所示：
const wrapper = mount(<MyComponeny /&g
浏览 1提问于2018-02-21得票数 11
我最近开始用玩笑和酶。我正在编写简单的代码来学习玩笑&酶。
有一个考试我不能通过。这个问题我已经有很长时间了。
我不明白为什么下面的第一个断言是可以的，而下面的第二个断言则不是。
expect(component.find(CommentBox).dive().find('.comment-box').exists()).toBe(true);
expect(component.find(CommentList).dive().find('.comment-list').exists()).toBe(true);
这些组件是兄弟姐妹。
<div&
浏览 2提问于2017-06-28得票数 1
回答已采纳
考虑到我有一个使用React的图表，然后像这样重新绘制图表：
<ResponsiveContainer width="99%" height="99%">
<LineChart data={data}>
<Line dataKey="test"/>
</LineChart>
</ResponsiveContainer>
为什么用JsDom在酶中安装它而不呈现LineChart的子级(即Line没有安装)？
浏览 5提问于2020-02-13得票数 2
回答已采纳
我正在尝试使用jest和酶为react中的容器编写单元测试。我的react代码如下：
AgentForm.js
import {
resetStatusMessage,
formSetError,
formResetError,
createAgent,
updateAgent
} from "../../actions";
componentWillMount = () => {
const {
agents,
match,
push,
resetS
浏览 0提问于2018-01-29得票数 0
2回答
假设我有这样的组件-
// @flow
import React, { PureComponent } from 'react';
export default class ReplaceLink extends Component {
containerRef = React.createRef();
componentDidMount() {
const links =
Array.from(this.containerRef.current.getElementsByTagName('a'));
links.f
浏览 0提问于2019-04-08得票数 0
回答已采纳
我正在用酶开玩笑，并试图打印出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
我正在使用酶+ Jest来测试一些React组件。
我有以下测试：
describe('<Modal />', () => {
let wrapper;
it('should render children props', () => {
wrapper = shallow(<Modal />);
wrapper.setProps({
children: <div className='should-render'>This should be rendered
浏览 0提问于2020-03-14得票数 0
我用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
回答已采纳
2回答
如果我需要在div中包装每5个项目，那么在Slighlty中如何做到这一点呢？我认为这会起作用，但是div的结束标记从未被呈现过。我可以在开始的div中使用测试，但不能在结束的div中进行测试。 <ul>
<sly data-sly-test="${menuItemList.index == 0}"><div class="row-of-five"></sly>
<li data-i="${menuItemList.index}">
<a>${menuItem.
浏览 28提问于2020-10-23得票数 0
回答已采纳
我有一个反应组件，看起来像：
import React from 'react';
import Head from 'next/head';
export default class extends React.Component {
static defaultProps = {
language: 'en',
country: 'us'
};
...
render () {
const language = this.props.language || 'en';
浏览 0提问于2018-03-22得票数 1
回答已采纳
1回答
我有一个测试用例，该测试用例失败并提供了错误：
Expected value to be (using ===):
true
Received:
false
我不明白为什么，组件具有带有true false的属性，并且结果dom应该是正确的。
是什么导致了这个问题？
怎样才能看出什么是玩笑和酶的比较？
import React from 'react'
import { shallow } from 'enzyme'
import Location from './Location'
des
浏览 5提问于2017-09-09得票数 1
回答已采纳
1回答
我正在尝试将一个测试从酶迁移到反应测试库
酶的目的是“如果孩子不受影响，不应该强迫孩子重新渲染”。
const wasRendered = jest.fn();
const Component = (props) => (
<div {...props} />
);
const ChildComponent = () => {
wasRendered();
return <div>Hello</div>;
};
const SkinnablePa
浏览 3提问于2022-02-02得票数 0
我在用Jest /酶编写的测试用例中遇到了一些问题。我有一个React / Redux组件，并且试图编写一个基本的测试，但是得到了以下错误：
Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was 'undefined'.
这是我的密码：
dashboardComponent.js
import '../stylesheets/dashboardCom
浏览 0提问于2018-08-31得票数 6
回答已采纳
1回答
反应动态图像
、、、、
我有以下问题的反应。
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import RecipeService from "./RecipeService";
import RecipeProfileImg from "./RecipeProfileImg";
import "../../Assets/css/recipePage.css";
const RecipeComp =
浏览 5提问于2022-11-22得票数 0
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
回答已采纳
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
用于反应测试的酶、ReactTestUtils和反应测试库有什么区别？
ReactTestUtils文档说：
ReactTestUtils使在您选择的测试框架中测试反应组件变得容易。
酶的文件只是说：
酶是一种用于React的JavaScript测试工具，它使断言、操作和遍历反应组件的输出变得更容易。
反应-测试-库文件：
反应测试库是一个非常轻的解决方案，用于测试反应元件.它提供了轻的实用功能之上的反应-多玛。
为什么每一种解决方案实际上都比较容易，而另一种解决方案却无法实现？
浏览 6提问于2019-01-11得票数 88
回答已采纳
2回答
问题
我刚开始做酶和反应测试。我试图让酶与业力和webpack一起工作在一个琐碎的反应部件上。我的问题是包装器上的prop()返回null，我不知道为什么。
Greeter.js
import React from 'react';
/*
* A trivial component we added while trying to get the react testing working
* */
export default class Greeter extends React.Component {
constructor(props) {
super
浏览 0提问于2016-05-05得票数 8
回答已采纳
我正在试着测试一个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
回答已采纳
1回答
哈洛，我现在正在学习用玩笑、酶和钩子进行反应测试。我发现了同时使用递减和增量的问题。减少不起作用。
App.js
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const [err, setErr] = useState(false);
const decrement = () => {
if (count < 1) {
setErr(true);
} else {
浏览 1提问于2020-07-17得票数 1
回答已采纳
1回答
测试反应重定向
、、
我有一个react组件，它可以导致两个重定向中的一个被呈现，例如：
render () {
if(condition) {
return <Redirect to={'page1'} />
} else {
return <Redirect to={'page2'} />
}
}
在酶测试中，我发现了如何测试重定向正在呈现：
expect(page.find('Redirect').length).toEqual(1)
但是，我不知道如何配置测试，以便能够测试正在呈现的重定向。根据酶文档，不可能
浏览 2提问于2018-05-16得票数 3
回答已采纳
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
我想做的是：
我有各种独立的组件，它们自己管理自己的状态。每个组件的状态一定要在每个组件中处理。
他们最初的状态来自后端。在此之后，他们维持自己的状态。
我不想为每个组件提出很多单独的请求，所以我只提出一个请求来获取所有组件的数据，并将其传递下去，这将为每个组件提供初始数据。
我目前的解决方案：
const MyApp = () => {
const [initialState, setInitialState] = useState();
useEffect(()=>{getInitialState().then((data)=>{
浏览 9提问于2020-06-12得票数 0
1回答
说真的，从酶中使用浅层和渲染有什么不同？ 下面是这两者的一个示例： 使用浅层测试渲染： import "jest";
import * as React from "react";
import { shallow } from "enzyme";
import Item from "../item.component";
describe("Item", () => {
it("renders correct", () => {
const item = {
浏览 10提问于2019-01-17得票数 0
回答已采纳
我使用jest和酶库来用创建- react app样板对进行反应测试。
随着套件和测试的运行，我陷入了上述错误。还没找到任何解决办法。如果有什么解决办法请告诉我。
TypeError: Cannot read property 'subroute' of undefined
浏览 2提问于2018-12-20得票数 0
1回答
因此，我开始从单元测试反应组件组成材料-UI组件使用Jest和酶设置。到目前为止，每个事件模拟都很正常，直到我遇到了物料UI中的Select。(下面有更多信息)
项目被引导使用创建-反应-应用程序和使用材料-ui-下一步。
依赖关系版本
反应: 16.2.0
React Dom: 16.2.0
反应-说明: 1.1.1
材料用户界面: 1.0.0-beta.35
Jest:一个装有安装程序的(22.4.3)
酶: 3.3.0
酶适配器反应16: 1.1.1
问题
我有一个名为FiltersDesktop的纯功能组件，它由Material表单字段组成。其中三个
浏览 1提问于2018-04-01得票数 8
回答已采纳
我有一个简单的应用程序与反应路由器v4.0。有主页和关于的链接，可以按下和适当的路线将呈现在一个网页。
我注意到，当单击一个已经激活的主页链接两次或更多时，每次都会重新安装家庭组件，这是意想不到的行为。
只有当Route元素不是直接在Router中，而是在包装函数App中时，才会发生这种情况。例： (按主页链接和检查控制台日志)
const Root = () => (
<Router>
<App />
</Router>
);
如果我将路由直接放置到Router组件，则不会每次卸载Home。
const Root = () =>
浏览 8提问于2017-11-28得票数 1
如何使用jest和酶找到组件内部的元素？ 假设我有一个组件父组件( Login )和两个子组件(Title和Form)，那么在组件登录中，我想要找到Form组件中是否有TextInput元素或其他元素，以及Form组件中的其他元素，使用jest和酶，那么我如何才能仅用1个单元测试(Login.test.js)就能获得呢？ 这是我的插图登录组件 <Login>
<Title title='Login Page' />
<Form
email={this.state.email}
password={this.state
浏览 17提问于2020-01-18得票数 2
1回答
酶测试同一组分内的多种渲染方法
、、、、
我有一个具有多个呈现方法的组件。我怎么能测试所有这些？用酶和玩笑与反应。
一些伪代码作为我的组件结构的示例，因为组件很大。
class MyComponent extends Component{
render1(){
return(
<div>render1</div>
)
}
render2(){
return(
<div>render2</div>
)
}
render(){
return(
<div>default&l
浏览 0提问于2017-09-08得票数 0
回答已采纳
2回答
我正在尝试测试一些组件，但我不能。它在mount()和shallow()上抛给我一个错误
TypeError:无法读取未定义的属性“parentNode”
我正在使用react-router-dom进行路由。
这是所有的部件。
呈现组件.(最高组件)：
import React, { Component } from 'react';
import HeaderSection from './header-section';
import BodySection from './body-section';
import FooterSe
浏览 0提问于2019-03-21得票数 0
1回答
我刚刚开始学习ReactJS，并试图找出如何--如果--我可以使用Symfony2应用程序在服务器端生成的现有模板。
其想法是使用ReactJS更新视图的部分(小部件--或者从技术角度来看，Symfony2“部分模板”)，例如，更新评论计数器，或者将新消息添加到新闻列表的顶部，并删除最底层的消息。
当然，我可以只使用对服务器的Ajax调用，从Symfony2 / Twig获取列表的整个模板，然后用jQuery或其他方式在DOM中刷新/替换它：
<ul id="list">
<li>1 news</li>
浏览 2提问于2015-07-31得票数 4
1回答
对于正在工作的项目，我们决定使用自定义构建的JS库，该库在DOM中注入一个<script>标记，该标记链接到第三方JS库。我一直在写这个项目的反应与CRA和使用Airbnb酶与浅层渲染，以测试组件。在介绍这个自定义构建的JS库之前，我们没有问题来测试这个项目并获得很强的覆盖率。当我们引入它时，从目标组件(引入自定义逻辑的地方)到根目录的所有测试文件都开始失败。我调试了这些测试，注意到这是因为这些组件相互导入(如下面所示)，最后一个组件从使用window变量的自定义库中导入其中一个函数，而它却找不到它。我怀疑这是因为我使用Airbnb酶浅渲染，而不是渲染一个完整的DOM树。但是，在一
浏览 1提问于2018-08-23得票数 0
在发出ajax请求之后，我正在尝试测试Vue应用程序的模板，该请求正在更改组件数据的一个变量。此变量(书籍)用于条件呈现库。
CONTEXT：我想创建一个图库，以显示我存储在后端的书籍。为此，我获取了有关安装组件的书籍。其结果在变量books中设置。我试图测试的是，在ajax调用之后，组件用书籍呈现库
PROBLEM：在设置图书变量时，应该呈现div <div v-else-if='books.length > 0'>SHOW GALLERY</div>，但是仍然呈现“<div v-else class='loader'>
浏览 0提问于2018-12-14得票数 18
我有一个React组件，它包含在高阶组件withRouter中，如下所示：
module.exports = withRouter(ManageProfilePage);
我的路线如下：
<Route path="/" component={AdrApp}>
<IndexRoute component={Login}/>
<Route component={CheckLoginStatus}>
<Route path="manage-profiles/:profileId" compone
浏览 7提问于2017-05-26得票数 35
回答已采纳
2回答
在下面的场景中，Child作为children传递给App，并作为其子级直接在App中声明。现在的行为是，当Child被呈现时，作为children传递的App不会render。这是有意义的，因为它是从顶部传递的，所以如果在顶部发生状态改变，那么它也会有re-rendered。
const {useState,useEffect} = React;
function App({children}) {
const [state,setState] = useState(0);
return (
<div className="App">
浏览 5提问于2021-04-11得票数 1
1回答
我用酶来测试一种反应成分，它把另一种成分作为道具。
我需要测试道具组件中的事件处理程序，但是在使用酶时遇到了问题。我尝试过模拟事件并手动地使用.click()'ing，我使用Jest作为主要测试框架。
而且，wrapper.find('MenuItem')无法找到道具组件。
MainComponent.js
<MainComponent>
<Dropdown
overlay={
<Menu >
{menuItems.map((item, i) => <Menu.Item key={i} o
浏览 3提问于2020-05-07得票数 0
回答已采纳
登陆页面上有两个主要链接，然后当用户单击该选项时，它应该重定向到该组件，并且不会在同一个页面中呈现下面的组件。
但是，与其转到下一页，该组件将像导航条一样显示在下面。
const MainRoutes = () => {
return (
<ReactRouterDOM.HashRouter>
<div className='routes'>
<nav>
<ul>
<li>
<Link to=&#
浏览 4提问于2021-03-22得票数 2
回答已采纳
现在测试React Native组件的首选方法似乎是使用mocha、react-native-mock和酶的组合来浅层呈现组件。
问题是，浅层渲染只深入一层，有时组件的嵌套视图需要您测试额外的一层或两层。
理论上，酶支持mount()来完全呈现组件，但实际上这是失败的，因为。
考虑到这些限制，人们如何测试超过一个呈现级别的组件？
浏览 14提问于2016-08-03得票数 10
回答已采纳
我试图在重复的li组件中添加片段：
<ul>
<li wicket:id="listView">HERE GOES MY FRAGMENT</li>
</ul>
填充列表视图的代码如下：
@Override
protected void populateItem(final org.apache.wicket.markup.repeater.Item<Message> item) {
Message msg = item.getModelObject();
浏览 6提问于2012-05-09得票数 0
回答已采纳
2回答
关键的反应是什么？
、、、
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
constructor(props) {
super(props)
this.state = {
list: [{id: 1,val: 'aa'}, {id: 2, val: 'bb'}, {id: 3, val: 'cc'}]
}
}
click()
浏览 2提问于2017-08-31得票数 1
回答已采纳
1回答
我正在尝试创建一个使用掩码登录的模式，当您单击“登录”按钮时，该掩码会逐渐消失，当您关闭它时会逐渐消失。我决定让我们的“反应-过渡-团体”库来实现这一点。褪色的作品很好，但它很快就消失了，没有动画应用。我怎么才能让它起作用？
连接组件：
<div>
<ModalRoot {...this.props}>
<Grid>
<Menu {...this.props}/>
<div
浏览 1提问于2017-07-25得票数 1
回答已采纳
我正在使用Jest/酶法测试React/TypeScript应用程序，而且我很难编写测试来断言某个按钮是否在一段时间后出现：
下面是要测试的组件的一个非常简化的版本：
import { StyledNotifyButton } from './styles'; //style-component element
const SomeComponent = (): ReactElement => {
const [showNotifyButton, toggleNotifyButton] = useState(false);
useEffect(() =>
浏览 2提问于2021-05-07得票数 4
回答已采纳
1回答
我有一个简单的反应组件，我正在尝试用酶来测试。对我来说，这个测试似乎微不足道，应该可以通过(只需检查div是否存在)：
import React, {Component} from 'react';
import uuid from 'uuid/v1';
import './styles.css';
import { connect } from 'react-redux';
import { saveCheckboxInput } from '../../actions/userInputActions';
c
浏览 10提问于2018-09-06得票数 1
回答已采纳
1回答
我正在使用一个.NET框架4.7.2MVC项目，我正在查看以下代码：
@if(String.IsNullOrWhiteSpace(Model.SomeObject.Field) == false)
{
<text>.@Model.SomeObject.Field</text>
}
<text></text>是做什么的？这是有效的HTML 5还是剃须刀的一部分？
浏览 0提问于2019-07-12得票数 2
回答已采纳
我有一个简单的酶测试，它检查HTML输入密码字段是否为空，然后尝试按如下方式键入一些文本。
expect(wrapper.find({type: 'password'})).toHaveLength(0);
wrapper.find({type: 'password'}).simulate('keydown', {which: "password123"});
第一行运行良好，并通过。但是，第二行失败，并报告以下错误。
方法“模拟”意味着在一个节点上运行。0找到了.
酶如何才能在一条线上而不是在另一条线上找到该成分？
浏览 2提问于2019-12-11得票数 2
回答已采纳
1回答
背景 因此，我正在向一个项目添加react query，但我的酶测试遇到了问题。对于那些使用过RQ v3的用户，您知道它需要一个QueryClientProvider包装器。这对我的应用程序来说很好，但是像这样的测试： ...
const mountedComponent = () => {
return mount(<Component {...props} />);
}; 除非我像这样添加一个包装器，否则将会失败： import { QueryClient, QueryClientProvider } from 'react-query';
co
浏览 15提问于2021-02-01得票数 0
我目前正在学习Backbone.js，我很难学习如何正确地使用视图(因为我在MVC方面经历过)，下面是我要做的事情：
模板
<script type="text/template" id="todolist-template">
<ul></ul>
</script>
<script type="text/template" id="todo-template">
<li>
<
浏览 1提问于2013-09-17得票数 5
回答已采纳
在无序列表中，类型属性接受盘、方、圆等作为其值。今天，我遇到了一个代码，其中的type="A"是在标签中给出的，它运行良好。我只想显示它的输出，就像有序列表。我知道类型已被废弃，并且它在ul标记中使用有序列表功能是错误的，但是有人能告诉我为什么会发生这种情况吗？如果是这样的话，那么为什么我们使用有序列表呢？
<ul type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
输出：
A.Coffee
浏览 8提问于2014-04-01得票数 0
回答已采纳
我第一次尝试在我的视图中使用Vue组件。我创建了一个文件assets/js/components/ImageUpload.vue，如下所示：
<template>
<div>
<div v-if="!image">
<h2>Select an image</h2>
<input type="file" @change="onFileChange">
</div>
<div v-else>
<img :src=&
浏览 6提问于2016-10-13得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
