浅层不呈现包装的组件
是指在软件开发中，没有提供封装、抽象或隐藏内部实现细节的组件。这种组件通常是直接操作底层资源或提供基本功能的组件。
浅层不呈现包装的组件的特点包括：
- 缺乏封装：这些组件没有提供高层次的封装，开发人员需要直接操作底层资源或实现细节。
- 直接访问底层资源：这些组件允许开发人员直接访问底层资源，如操作系统接口、硬件接口等。
- 基本功能组件：这些组件通常提供基本的功能，如数据存储、网络通信、图形处理等。
浅层不呈现包装的组件的优势包括：
- 灵活性：由于没有封装和抽象层，开发人员可以更灵活地控制和定制组件的行为。
- 性能优化：直接访问底层资源可以提高性能，避免了封装和抽象带来的额外开销。
- 应用场景广泛：这些组件适用于各种场景，特别是对于需要直接操作底层资源或实现细节的应用程序。
以下是一些与浅层不呈现包装的组件相关的腾讯云产品：
- 云服务器（Elastic Compute Cloud，简称 CVM）：提供了虚拟机实例，可以直接访问底层资源，并灵活定制配置和管理。
- 云数据库 MySQL 版（TencentDB for MySQL）：提供了基于 MySQL 的数据库服务，可以直接操作数据库底层资源。
- 云存储（Cloud Object Storage，简称 COS）：提供了对象存储服务，可以直接访问底层存储资源，并支持大规模数据存储和访问。
- 云网络（Virtual Private Cloud，简称 VPC）：提供了虚拟网络环境，可以直接配置和管理网络资源，实现自定义网络拓扑。
请注意，以上产品仅作为示例，实际使用时需根据具体需求进行选择。
相关·内容
我最近开始用玩笑和酶。我正在编写简单的代码来学习玩笑&酶。
有一个考试我不能通过。这个问题我已经有很长时间了。
我不明白为什么下面的第一个断言是可以的，而下面的第二个断言则不是。
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
回答已采纳
我正在用酶开玩笑，并试图打印出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中的容器编写单元测试。我的react代码如下：
AgentForm.js
import {
resetStatusMessage,
formSetError,
formResetError,
createAgent,
updateAgent
} from "../../actions";
componentWillMount = () => {
const {
agents,
match,
push,
resetS
浏览 0提问于2018-01-29得票数 0
我正在重构项目中的一些代码，将类组件传递给函数组件。在我的测试中出现了一些错误。 我有一个叫做"MenuWeb“的组件，我现在使用的是redux钩子。 这就是测试代码 describe('Testing MenuWeb', () => {
it('should render Menu Web correctly', () => {
const wrapper = shallow(<MenuWeb store={store} />)
expect(wrapper).toMatchSnapshot()
})
浏览 9提问于2020-12-01得票数 2
回答已采纳
1回答
所以在普通的react中，setState触发了render方法。现在，关于Redux，假设我触发了一个操作，从reducer(s)返回的状态是全新的，所以听起来每个组件都应该更新，尽管我知道这不是真的，因为当我调试我的应用程序时，我可以看到它，而且听起来性能很糟糕。所以我的问题是，redux是否在每个组件中查找它需要的状态切片？在mapStateToProps？一般来说，Redux是如何决定何时调用render方法的呢？
我知道Redux做了一些优化...谢谢..。
浏览 8提问于2016-12-15得票数 0
假设input有value={this.state.searchValue}。
onClose = () => {
this.setState({searchValue: ''}, () => {
this.search();
});
}
例如，如果容器关闭，而字符串已经为空，这是不是一种浪费？
应该做这样的检查吗？
onClose = () => {
if (!isEmpty(this.state.searchValue)) {
this.setState({searchValue: ''},
浏览 2提问于2017-06-22得票数 1
我在用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
回答已采纳
我目前正在为React中的一个组件编写测试覆盖率，该组件将在属性newUser为真的情况下将脚本标记注入到HTML中。当我运行测试并将prop作为true传递时，它无法将脚本标记附加到文档正文中，因此它无法检查脚本src。我的组件是
class AddScript extends Component {
render() {
const {
newUser,
async,
} = this.props;
const asyncAttribute = async ? true : undefined;
if (newUser) {
浏览 22提问于2019-11-30得票数 0
回答已采纳
我对测试非常陌生，我正在尝试在现有的react项目中实现它们。我有一个按钮组件，需要一个主题上下文。我理解要在测试文件中提供这个主题，您需要将组件放在主题提供程序中。然而，即使在我这样做并尝试了将主题作为上下文传递的每一种可能的变体之后，我仍然得到了错误：
“Material:提供的styles参数无效。
您正在提供一个在上下文中没有主题的函数。
其中一个父元素需要使用ThemeProvider。“
我的button.test.js：
import React from 'react';
import { ThemeProvider, createMuiTheme, resp
浏览 2提问于2020-04-07得票数 0
回答已采纳
我甚至尝试了一下，给出了类名，去掉了div，再把它加回去。能帮上忙吗? //Page1.js <div className="email" >
<MyInput className="input1" name="email" type="email" onChange={formikProps.handleChange}/>
</div> //Page1.test.js describe("testing email",()=>{
te
浏览 17提问于2020-07-07得票数 0
回答已采纳
我想通过测试一个很大的li列表来优化我的react应用，这是一个简单的待办事项列表。 例如，当点击一个li时，任务将是划线的，复选图标将是绿色的。这个简单的操作对于一个大的列表是非常慢的，因为整个列表都是重新渲染的。 如何使用React Hooks做到这一点？ function App() {
const [list, setList] = useState([]);
const [input, setInput] = useState("");
const inputRef = useRef(null);
useEffect(() => inputR
浏览 12提问于2021-06-30得票数 0
1回答
我已经为post.js编写了找到3p标签的测试用例，但它抛出了一个错误。如何正确测试此组件？
Post.js
import React from 'react';
import './Post.css';
const Post = (props) => {
const displayPosts = (props) => {
const { posts } = props;
if ( posts.length > 0 ){
return(
posts.map( (post
浏览 2提问于2021-03-28得票数 0
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
我是一个react新手，在发现钩子之后，我正在尝试构建一个简单的购物车应用程序，而不使用类组件。在我的顶层组件应用程序中，我通过导入的json获得了一个项目列表，然后使用useState为项目列表创建了一个状态，还构建了一个reducer来添加或删除具有自己状态的购物车中的项目。每个状态都被传递给一个组件、ItemList以及一个用于分派购物车状态更改(代码中的SpeiseListe)和购物车的函数。ItemList将物品列表映射到单个物品组件，该组件具有一个按钮，onClick触发所述分派，并且顶层组件中的购物车挂钩状态得到更新。现在这里的问题是，在涉及购物车的每个操作上，整个应用程序都会
浏览 19提问于2019-06-13得票数 0
好吧。这是我的情况。我有一个很大的组件，叫做TheForm。在TheForm中，有以下几个子类：TextEditor、TagInput、TipCard --这给出了如何编写一个好的表单和Preview的建议
const TheForm = () => {
const [parag1, writeParag1] = useState("");
const [parag2, writeParag2] = useState("");
const [tags, updateTags] = useState([]);
return (
&l
浏览 0提问于2019-08-07得票数 0
回答已采纳
2回答
我正在尝试测试嵌套在withRouter中的应用程序组件
export default withRouter(App);
在我的index.js
ReactDOM.render(
<BrowserRouter>
<App client={client}/>
</BrowserRouter>,
document.getElementById('root')
);
我的测试
describe("Test: Home page", ()=>{
const client = {}
let w = sha
浏览 15提问于2018-02-09得票数 0
1回答
用存储的Mocha和酶测试组件
、、、、
我正在尝试测试我的组件，但由于存储，我有一个错误。
import React from 'react';
import { shallow, simulate } from 'enzyme';
import configureStore from 'redux-mock-store';
import { Provider } from "react-redux";
import DropzoneComponent from '../components/DropzoneComponent';
const moc
浏览 1提问于2018-08-24得票数 0
我刚刚开始使用jest和酶。
我有一个问题，使我的单元测试工作。我正在使用redux- mock -store来模拟store对象。
it('shows an li for each comment', () => {
expect(container.find('li').length).toBe(2);
});
我期望有两个li元素，但是我得到了0个li元素。
我在这个错误中纠结了很长时间。
有没有人能帮我弄清楚怎样才能通过这项测试！？
来自jest test runner的测试结果
Error: expect(received).toBe(e
浏览 25提问于2017-06-27得票数 1
回答已采纳
我从reactstrap实现了简单的reactstrap。医生()说
不受控制的组件可以提供所需的功能，而无需管理/控制组件的状态。
如果我想实现一个单元测试(例如jest + enzyme)，将其状态测试为打开或关闭，那么我如何创建单元测试而不手动修改状态值？这有可能做到吗？这似乎只有普通的Tooltip组件才有可能，但我喜欢听取经验丰富的工程师的建议。
更新：
根据要求，我包括这里的工具提示和单元测试，我正在尝试执行。目前，我想在工具提示上模拟hover，但是mockHover.mock.calls.length返回为0，我将其解释为模拟函数没有触发。
这是我的工具提示。
impo
浏览 2提问于2019-05-20得票数 1
回答已采纳
3回答
我只是从Jest和Snapshot测试开始，我想知道为什么所有的例子都要对React组件进行“深度渲染”来创建快照。
示例
const A = () => {
return <div><B /><B /></div>
}
const B = () => {
return <div>This is B</div>
}
// TEST
describe('Test', () => {
it('renders correctly', () => {
浏览 1提问于2017-02-20得票数 14
回答已采纳
1回答
酶浅渲染不能正常工作
、、、
在我的一个组件中，在决定返回哪个组件之前，我会检查我的道具的值。
但是，我在测试中面临的问题是，快照没有为这些组件正确地创建。
当我单独测试一个组件时，快照是正确创建的，但当组件在返回一个JSX之前检查螺旋桨值时，就不会创建快照了。
这是我的组成部分：
import React, {Component} from 'react'
import {Button, Text, View, FlatList, StyleSheet, ActivityIndicator} from 'react-native'
import CategoryCell from '
浏览 0提问于2018-12-22得票数 2
回答已采纳
1回答
酶的浅层和堆积
、、
下面是组件计算器。
import SubComponent from './SubComponent';
export default class Calculator extends React.Component {
render() {
const {
result,
} = this.state;
return (
<form>
<input
type="number"
defaultValue={0}
re
浏览 0提问于2018-09-12得票数 0
回答已采纳
2回答
在发布这个问题之前，我尝试在stackexchange中搜索，但是我没有找到关于浅层和渲染的帖子，所以我希望有人能在这里帮助我。
在测试反应组件时，我应该何时使用浅层和渲染？根据airbnb的文档，我对两者的区别提出了一些看法：
由于浅层是将组件测试为单元，所以它应该用于“父”组件。(例如(桌子、包装纸等)
呈现用于子组件。
我问这个问题的原因是，我很难弄清楚我应该用哪一个(尽管医生说它们非常相似)。
那么，我如何知道在特定场景中使用哪一个呢？
浏览 2提问于2016-08-02得票数 133
回答已采纳
我做了相当多的组件测试与反应。最后，我在DOM (renderIntoDocument)和浅渲染之间切换，我有两个问题：
为什么在浅层渲染中不触发componentDidMount？
可以使用DOM方法触发componentWillReceiveProps吗？
谢谢
浏览 5提问于2016-02-29得票数 1
回答已采纳
1回答
重新选择如何影响组件的渲染
、、、、
我真的不明白重新选择是如何减少组件的渲染的。这是我在没有重新选择的情况下得到的：
const getListOfSomething = (state) => (
state.first.list[state.second.activeRecord]
);
const mapStateToProps = (state, ownProps) => {
console.log(state.first.list, state.second.activeRecord);
return {
...ownProps,
listOfSomething: getList
浏览 4提问于2017-03-30得票数 1
1回答
我在测试我的组件时遇到了一个问题，这个组件很薄地包装了Material-UI autocomplete。在我的测试中，我想查看传递给的props，但我的控制台语句是一个空对象。我正在使用酶的浅层方法来渲染它。下面是我的代码：
const underlineFocusStyle = {
display: 'block',
height: '100%',
outline: 'none',
position: 'relative',
padding: '0px',
wi
浏览 0提问于2017-05-16得票数 7
回答已采纳
我试图理解何时使用React纯组件以及何时使用常规组件。我有个简单的问题。
给定相同的道具和相同的状态，组件如何呈现不同的结果？
如何确定道具物体浅层比较的极限？我还没有在道具中使用嵌套属性，但应该始终使用纯组件吗？
下面引用的话说，当父组件是纯的时，所有的子组件都不会重新呈现，比如我们理解并确保了这一点，但这是否也意味着我们必须将子程序封装在纯组件中，或者它们作为常规组件很好？
此外，React.PureComponent的shouldComponentUpdate()跳过整个组件子树的支持更新。确保所有的子组件也是“纯的”。
最后一个是。以下引用的官方文档意味着我们无法访问常规组件
浏览 1提问于2018-10-24得票数 1
我正在为一个简单的React组件编写一个测试，该组件使用props传入对象，然后将文本从该对象加载到屏幕上。下面是我得到的信息： QuoteBox.js import React from 'react'
export default class QuoteBox extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div
className='quote-box'
浏览 14提问于2020-09-18得票数 0
回答已采纳
1回答
对于我的反应组件，我有以下内容：
const ArchiveButton = ({collection, onClick}) => {
return (
<span>
{ collection.archived &&
<Button bsStyle="link" onClick={onClick}><i className="fa fa-rotate-left" /> Unarchive</Button>
浏览 0提问于2017-03-19得票数 2
回答已采纳
我用的是React v15.4，babel-jest v18和酵素v2.5.1
我有一个简单的反应组件：
import React, {Component} from 'react'
import {FormattedRelative} from 'react-intl'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout'
class About extends Component {
浏览 6提问于2017-03-28得票数 16
回答已采纳
1回答
我有测试反应组件的问题。这是我的密码。
// Component textfield-input.jsx
import React, { PropTypes } from 'react'
import HelpComponent from '../../atoms/help-component'
export default function TextField(props) {
const { helpMessage, label, error, ...rest } = props
return (
<div class
浏览 1提问于2017-05-29得票数 0
回答已采纳
2回答
我有一个名为Contact的function组件，它又有一个名为Header的子组件，我正在将一个函数传递给标题组件handleButtonClick()。该函数在组件中调用如下：
<Header handleButtonClick={this.openPopup} >
openPopup()函数在Contact组件中定义，如下所示：
openPopup = () => this.setState({ popupOpen: true });
因此，我尝试使用jest和酶法来测试这个函数：
it("calls the `openPopup` function"
浏览 1提问于2018-05-22得票数 3
回答已采纳
我有一个组件，ComponentDidMount正在尝试调用一个API函数。
componentDidMount(){
this.getTypes(this.props.user).then(Response => {this.setState({List: Response.Types })});
}
async getTypes(userLogin){
try{
res = await API.get(......... );
}
catch(error) {
....
}
}
现在我想调用comp
浏览 0提问于2020-05-28得票数 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
回答已采纳
我正在尝试测试一些动态创建的html。目前，我必须创建一个快照，并将生成的块和预期的块与快照匹配。
我想做的只是比较没有快照的预期块和生成块，likey这样：
test('should create div elements', () => {
const expectedElements = <div><div key={1}>test</div></div>;
const generatedElements = [<div key={1}>test</div>];
const op =
浏览 0提问于2018-04-05得票数 0
我正试图了解Redux中实际使用的不可变性(如果有的话)。我发现的每一篇教程/文章/文档都指出，还原器不应更改状态对象，而应创建已更改数据的新副本(即还原器必须是纯函数)。我理解这一点，但是我找不到任何地方解释Redux内部实现是如何实际使用这个准则的。
，这只是一个很强的推荐，还是如果我使还原剂非纯的话，Redux内部的东西会破裂吗？
，如果是晚一点，那么到底会发生什么呢？
我确实找到了一些地方，Dan说，在一些(非常罕见)情况下，还原剂可能是非纯的，但它是危险的(同样，没有确切的解释什么是风险)。
浏览 1提问于2016-03-13得票数 3
1回答
在这段视频中(2分钟)：
在1点40分左右，叙述者说：“所以正如你所看到的，这个对象只是我们渲染输出的一个层次，这使得编写单元测试变得简单得多，因为我们只需要担心组件，而不是组件被渲染的环境。”
他所说的“一层深”是什么意思？在CoolComponent示例的上下文中，两级深度呈现的输出可能是什么样的呢？
浏览 3提问于2017-10-23得票数 7
1回答
我正在使用enzyme编写一些测试，但我有一些奇怪的行为。这是我的测试：
import React from 'react'
import { TypeTable } from 'routes/Type/components/TypeTable'
import { shallow } from 'enzyme'
import { Table } from 'react-toolbox'
// ...
let _props, _wrapper
beforeEach(() => {
_p
浏览 3提问于2016-10-24得票数 2
回答已采纳
2回答
反应试验-酶截短法
、、、
我在一个项目中使用。展开折叠和省略的基本设置应该如下所示：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Truncate from 'react-truncate';
class ReadMore extends Component {
constructor(...args) {
super(...args);
this.state = {
expand
浏览 3提问于2018-01-03得票数 1
回答已采纳
我想使用React Hooks实现shouldComponenetUpdate。我遇到的所有答案都建议使用React.memo作为方法，但是React.memo第二个参数使用prevProps和nextProps作为参数，而我希望根据状态检查我的条件。 如何实现这一点有什么帮助吗？
浏览 1提问于2019-09-03得票数 0
我不知道在运行快照测试时为什么会得到空的shallowWrapper对象，我使用的是Jest和
我在App.test.js.snap文件中得到了什么：
// Jest Snapshot v1, "goo.gl/fbAQLP"
exports[`renders App component 1`] = `ShallowWrapper {}`;
我的package.json文件：
{
"name": "test",
"version": "0.1.0",
"private": true,
浏览 4提问于2020-09-22得票数 2
回答已采纳
2回答
我正在尝试理解重新选择，但到目前为止都失败了。我知道它们在那里是为了性能等，如果组件没有发生状态变化，它应该停止调用mapStateToProps吗？
我有这个组件
const mapStateToProps = ({ data: { complete } }) => ({
isComplete: complete,
})
它会在每次状态更改时调用，我只希望在状态从false更改为true时调用它
所以我试了一下
const checkIfIsComplete = () => createSelector((state, props) => props.data.co
浏览 0提问于2020-03-31得票数 0
1回答
我有一个基本的电子商务应用程序供练习。有一个叫做“商店”的功能组件，它有两个状态：
[products, setProducts] = useState([10ProductObjects])
and [cart, setCart] = useState([])
在第一个呈现周期中，将加载10个产品，每个Product组件都有一个"add“按钮，该按钮将产品添加到cart数组中。当我单击按钮时，购物车数组将被填充并显示其长度。然而，这样做，重新呈现这10种产品，即使没有什么变化，他们。
现在，正如我所看到的，由于其中一种状态发生变化，即cart数组，整个Shop组件再次呈现。其子组件，
浏览 1提问于2021-06-08得票数 1
回答已采纳
在我的组件的render方法中，我创建了十几个其他组件的实例，其中一些组件不需要在每次更新其父组件后呈现。我可以将一个标志设置为true，然后在componentDidMount()中将其重置为false，但我认为还有更好、更好、更简洁的方法。在这里，我展示了组件的render方法 render() {
console.log("som v render weather list")
const currentWeathers = this.getWeathersOnSpecificPage()
const filters
浏览 8提问于2021-02-06得票数 1
1回答
我在为以下代码编写测试时遇到了很多困难：
import { Table, TableBody, TableCell, TableHead, TableRow, Tooltip } from '@material-ui/core';
import React, { Component } from 'react';
const Status = ({ id, dependency}) => {
let text, tooltipText;
if (id === 'something' ) {
tooltipText =
浏览 1提问于2019-04-12得票数 1
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
回答已采纳
根据我从React文档和web上的其他材料中了解到的，useCallback通过确保回调的内存版本被传递给它来避免子组件的重新呈现，因此引用属性对子组件保持不变。但是，只有当我在子组件上使用React.memo时，所有这些才有效。如果没有React.memo，子组件无论如何都会重新呈现。我的问题是，在这种情况下，如果没有对子组件应用React.memo，useCallback有什么用处。useCallback的其他好处是什么？
浏览 2提问于2020-01-09得票数 4
1回答
我正在基于我的React组件(UserAutocomplete)创建一个AutoComplete组件。
其中，我的AutoComplete组件是：
render(
<input type='text' class='autocomplete'/>
);
我的UserAutoComplete是：
import Autocomplete from './autocomplete';
render(
<Autocomplete {...this.props} />
);
并使用Enzyme + Jest创建测试，
浏览 1提问于2016-12-12得票数 0
回答已采纳
1回答
假设我有一个导入组件的componentA，componentB和componentC。
在componentA中，我有一个基于道具的组件方法someMethod，它将输出一个导入的组件。
someMethod() {
const { someProps } = this.props
if (someProps === 'desktop') {
return (
<componentB
href="www.google.com"
>
浏览 2提问于2018-02-16得票数 0
回答已采纳
我正在试着测试我的组件
<TableRow key={1} name={name} />，呈现为
<tr>
<td>{this.props.name}</td>
</tr>
在测试文件中如下所示
const mockName = { }
const mockPopularSearchLitItem = TestUtils.renderIntoDocument(TableRow name={mockName} />)
但是，当我试图运行测试时，我会得到以下错误
不变冲突:findComponentRoot(.，.0)：无
浏览 0提问于2016-01-26得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
