如何使用重新组合的hocs测试react组件
如何使用重新组合的HOCs测试React组件？
在React开发中，高阶组件（Higher-Order Components，HOCs）是一种常见的设计模式，用于复用组件逻辑。当我们需要对使用了重新组合的HOCs的React组件进行测试时，可以按照以下步骤进行：
- 安装测试相关的依赖库：首先，需要安装一些测试相关的依赖库，例如Jest（测试框架）和Enzyme（React组件测试工具）。可以使用npm或yarn进行安装。
- 创建测试文件：在项目的测试目录中，创建一个与被测试组件对应的测试文件，命名为
ComponentName.test.js。 - 导入依赖：在测试文件的开头，导入所需的依赖库和被测试组件。
import React from 'react';
import { shallow } from 'enzyme';
import ComponentName from '../ComponentName';- 编写测试用例：使用Jest提供的
describe和it函数，编写测试用例。可以根据被测试组件的不同功能点编写多个测试用例。
describe('ComponentName', () => {
it('renders without crashing', () => {
shallow(<ComponentName />);
});
it('renders the correct content', () => {
const wrapper = shallow(<ComponentName />);
expect(wrapper.text()).toContain('Hello, World!');
});
// 更多测试用例...
});- 运行测试：在命令行中运行测试命令，例如
npm test或yarn test，以执行测试用例并查看测试结果。
以上是基本的测试流程，下面是一些常见的测试技巧和注意事项：
- 使用Enzyme的
shallow函数来浅渲染组件，以便进行单元测试。如果需要测试组件的子组件，可以使用mount函数进行深渲染。 - 在测试用例中，可以使用
expect函数结合各种匹配器（matchers）来断言组件的行为和输出是否符合预期。 - 如果被测试组件使用了重新组合的HOCs，可以使用Enzyme的
dive函数来获取被包裹的组件进行测试。 - 对于异步操作、事件处理等复杂场景，可以使用模拟函数（mock functions）和模拟定时器（mock timers）等技术进行测试。
- 如果被测试组件依赖了外部资源（例如API接口），可以使用模拟数据或模拟服务器（例如json-server）来进行集成测试。
综上所述，通过以上步骤和技巧，我们可以对使用了重新组合的HOCs的React组件进行全面且完善的测试。在测试过程中，可以根据具体需求选择合适的测试工具和技术，以确保组件的质量和稳定性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云测试服务（https://cloud.tencent.com/product/cts）
- 腾讯云云服务器（https://cloud.tencent.com/product/cvm）
- 腾讯云云原生应用引擎（https://cloud.tencent.com/product/tke）
- 腾讯云数据库（https://cloud.tencent.com/product/cdb）
- 腾讯云人工智能（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/bc）
- 腾讯云元宇宙（https://cloud.tencent.com/product/vr）
相关·内容
1回答
例如，我们有一个容器<ContainerName data=someData>并传递一些道具数据。
在这个容器中，我们使用重新组合，并具有以下代码：
const enhance = compose(
withProps({
statuses: ['ordered', 'received'],
}),
withProps(
// how do I pass props from this container to component ?
),
withState
浏览 3提问于2017-03-17得票数 2
回答已采纳
1回答
我是新来的反应和javascript。我一直在学习路由器，我遵循的一个教程是使用withRouter。无论如何，我发现了一些代码如何重新实现withRouter，因为它不再受支持。我的问题如下。内部函数如何获得道具参数。它是从哪里来的？谢谢大家的回复，我已经坚持了一段时间了。
function withRouter(Component) {
function ComponentWithRouterProp(props) {
let location = useLocation();
let navigate = useNavigate();
let params =
浏览 10提问于2022-08-27得票数 1
1回答
我在组件回购中使用i18next。组件工作正常，但我在测试方面有问题。我将i18next与hoc一起使用，当我只导出组件时，测试就会通过，但是当我导出它时，就像导出默认翻译('components') (列表)一样；测试失败。我试着做两个导出，使用hoc和不带，但是在另一个中使用了一些组件，如果没有hoc，我就无法导入它。我的架构看起来像:使用I18nextProvider的根组件，我已经用这个组件包装了每个组件，它是我的主应用程序中的主要组件。就像这样：
const Root = ({ component, i18 }) => (
<I18nextProvid
浏览 3提问于2018-02-18得票数 1
假设我们有传统的React /Redux方法：(如果您熟悉该代码，则不需要展开它：)
import React from 'react';
import { connect } from 'react-redux';
function Count(props) {
return (
<div>
<button onClick={props.increment}> + </button>
{props.count}
<button onClick={props.decr
浏览 1提问于2020-04-21得票数 7
3回答
根据用户是教授、学生还是未登录，我呈现不同的登陆页面。登陆页非常相似，唯一的区别是显示的按钮。我知道我可以使用内联条件或简单的if-else语句来解决这个问题。但是，我想知道在本例中实现条件呈现的最佳实践是什么。我知道高阶组件(HOCs)会有所帮助，但我不确定在这种情况下它们是否过分。
为了在同一个页面上，下面是我目前使用if-else语句呈现的不同的Landing组件。
Landing.js (未登录用户)：
import React from 'react';
import { withRouter } from 'react-router-dom';
im
浏览 1提问于2018-06-14得票数 0
2回答
考虑一个简单的反应组件：
class Child extends React.Component {
testMethod(): boolean {
console.log('called testMethod!');
return true;
}
render() {
return <div>Hello, World!</div>
}
}
export default withParent(Child);
为了简单起见，本例中的withParent是一个简单的临时选项，
浏览 3提问于2019-10-02得票数 0
我刚开始对单元测试做出反应，我正试图为组件方法编写一个测试。
以下面的例子为例，我需要为ComponentA的ComponentA方法编写一个测试
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
class ComponentA extends Component {
changeHandler = () => {
// addit
浏览 2提问于2019-09-20得票数 4
回答已采纳
1回答
高阶分量
、、
A/t到Docs，HOC不修改输入组件，也不使用继承复制其行为。相反，通过将原始组件封装在容器组件中，可以临时组合原始组件。
中的，如果道具更改组件被重新命名为newProps.
由于在特殊情况下，我们将道具传递给两个包装组件test1和test2，因此它们都应该在每个道具上更改。但这不会发生的。实际上，test1 & test2是通过状态提升和重命名来呈现test2更改道具的。但是test1仍然是一样的。检查附加的图像。
我很想知道react，连接和反应-路由器-dom withRouter实际上是如何工作在每一个道具上，改变存储和重发组件。
class Test extend
浏览 0提问于2018-12-15得票数 0
回答已采纳
1回答
我正在尝试为使用微前端架构的react网络应用程序编写单元测试。我的第一步是为应用程序容器编写单元测试。
应用程序容器react组件使用包含带有后续路由的交换机的react路由器来呈现主内容区域中的组件。
使用JavaScript运行时集成将每个应用程序挂载到应用程序容器。
我正在使用React Jest Library和Jest作为测试工具集的一部分。
我在互联网上到处搜索，没有找到任何关于我所拥有的问题的有用文章。它们中的大多数展示了测试与我的场景无关的web应用程序的演示。
我有三个问题，我想要一些指导。
(自微前沿)由多个组件层组成，这些组件与身份验证和其他业务逻辑链接在一起。我应该只
浏览 3提问于2021-08-09得票数 3
回答已采纳
1回答
我有一个集装箱组件的模态。它导入LabelDetailForm，它使用React门户将模态的内容添加到页面中。
import {compose, branch} from 'recompose'
import {actionCreators as uiActionCreators} from '../../redux/reducers/ui/uiActions'
import {connect} from 'react-redux'
import LabelDetailForm from '../../forms/labelDetail/
浏览 0提问于2018-08-18得票数 0
回答已采纳
3回答
我正在尝试理解React的高阶组件结构，但是所有的资源都只是假设您已经了解了扩展操作符在编写时在高阶组件中所做的事情: BaseComponent {...this.props} {...this.state}。如果一个组件已经作为道具传递进来，为什么需要像这样展开道具呢？
import React, { Component } from 'react';
const EnhanceComponent = BaseComponent => {
return class EnhancedComponent extends Component {
s
浏览 0提问于2018-01-26得票数 7
回答已采纳
在我的App.js中，有许多组件包装在来自react-router-dom的Switch组件中
App.js
import React from "react";
import Loadable from "react-loadable";
import { Switch } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";
const Test = Loadable({
loader: () => import(".
浏览 6提问于2022-07-25得票数 1
2回答
因此，在我的React应用程序中，我看到了定义HOCs的如下模式；
export function withMyApi() {
// Extra function wrapper to allow for clear place for configs. Plus, you can compose multiple HOCs if necessary
return function(WrappedComponent) {
class MyApiUrls extends React.Component {
constructor(props) {
s
浏览 3提问于2021-03-19得票数 2
回答已采纳
2回答
我想知道react中目录和组件的命名约定是什么。我有主components目录和组件类型(presentational、containers、hoc、views)。我还有一个名为DifferentReportsComparison的高阶组件。他住在"components/hoc/differentreportscomparison/DifferentReportsComparison.js“路径中，但我认为他是子目录的名称可能会让人困惑，因为它的名字很长。
我想知道您是如何组织组件的，特别是那些长名称的组件。
浏览 1提问于2018-11-22得票数 3
1回答
我创建了一个自定义文本分页组件(显示当前分页信息)。例如，总数的1-N )，我发现自己将重复代码添加到父组件(ComponentA和ComponentB)中。每次我需要将TextPagination组件添加到父组件时，我都需要添加相同的状态和回调方法。如果查看ComponentA和ComponentB，它们都有this.state ={ itemCount: 0}以及onDisplayLessData和onDisplayMoreData回调方法。这是我想要避免的事情，特别是当其他开发人员需要使用TextPagination组件时，他们需要记住添加所有的this...not。
构成部分A
cla
浏览 1提问于2016-12-22得票数 2
回答已采纳
你好，我有一个挑战，我可以如何扩展和添加额外的道具到页面。下面的代码片段工作得很好，它填充了基本文本。
import React from 'react';
import { Text } from '@whatever-library';
const SomeComponent = (props) => (
<div>
<Text field={props.fields.heading} />
</div>
);
因此，现在我想添加来自外部API的数据，以便在这个组件中呈现。下面是另一个.js文件的片
浏览 1提问于2019-05-15得票数 0
2回答
我们有一个Webpack包暴露反应组件。公开的组件包含来自同一个包的嵌套组件。我们希望允许用户用自己的特定版本替换组件。
例如，以下组件结构；
class A extends React.Component {
render() {
return (
<B/>
);
}
}
const C = require('./C');
class B extends React.Component {
render() {
return (
<C/
浏览 4提问于2017-09-08得票数 0
1回答
我正在尝试使用formik来作出反应。我发现了这样的密码：
import React from 'react';
import * as Yup from 'yup';
import { withFormik, FormikProps, FormikErrors, Form, Field } from 'formik';
// Shape of form values
interface FormValues {
email: string;
password: string;
}
interface OtherProps {
m
浏览 0提问于2018-09-13得票数 0
回答已采纳
1回答
我有一个有状态的Key组件，它表示键盘中的一个键，如下所示：
import React from 'react';
class Key extends React.Component {
constructor(props) {
super(props);
this.state = {
id: props.id,
customClass: props.customClass,
浏览 3提问于2017-04-17得票数 1
回答已采纳
我正在尝试使用refs来强制设置我的FlatList的onEndReached属性。有没有办法做到这一点？
我修改了一个 PR，它添加了setNativeProps，可以将颜色从黑色切换到白色，但无法调用onEndReached或onScroll。
有人能帮我弄明白我做错了什么吗？
export default class Testing extends React.Component {
componentDidMount() {
let tick = 0
this.list.setNativeProps({
onEndReached: info =>
浏览 1提问于2019-09-26得票数 1
1回答
我有一个列表应用程序，在那里用户可以添加多个类别的项目，当他们想要添加新记录时，有3个相关的屏幕与此特定功能。所有这些屏幕都有<Header/>组件，所以我认为HoC在这里会很好，这样我就可以在3个屏幕上重用它。然而，我无法做到这一点。 这是我到目前为止尝试过的： 这是我的HoC类 import React, { Component } from 'react';
import { View, StyleSheet, Text, StatusBar } from 'react-native';
import Header from '../
浏览 16提问于2019-10-02得票数 1
回答已采纳
1回答
试图连接一个临时的
、、、、
Im试图使用用户角色来确定是否显示组件。所以我试着用一个特别的方法来处理这个功能，但是我得到了一个错误，我不太明白。以下是代码：
import React from 'react';
import { getUserRoles } from 'modules/api/account/user/selectors';
import { connect } from 'react-redux';
const RestrictedOrFallBack = ({
wrappedComponent,
role,
userRoles
浏览 0提问于2019-01-29得票数 1
回答已采纳
2回答
在组件呈现中调用高阶组件。
、、、、
有一件简单的事情让我的逻辑被绊倒了：
我有一个特殊的AnimateOnLoad，它在页面组件中呈现默认内容(在react-router中使用)。
const DefaultLayout = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={matchProps => (
<div className="page-container">
{AnimateOnLoad(
浏览 0提问于2018-07-23得票数 4
回答已采纳
1回答
在我正在开发的React应用程序中，我将各种组件封装在我编写的自定义组件中，以完成诸如检查身份验证之类的工作。我想知道我的做法是好的还是坏的。专案小组的工作和预期一样，但我想知道我是否正在做一些不太好的事情。下面是一个示例:如果用户转到/profile，则呈现组件ProfilePage.js：
import React from 'react';
import Profile from './Profile';
import withLogin from './hoc/withLogin';
import { connect } from
浏览 0提问于2018-03-08得票数 1
回答已采纳
export const HOC = (WrappedComponent) => {
const { register, control, handleSubmit, reset, watch } = useForm({
defaultValues: {
test: [{ firstName: "Bill", lastName: "Luo" }]
}
});
const { fields, append, prepend, remove } = useFieldArray({
control,
n
浏览 4提问于2021-11-10得票数 1
回答已采纳
1回答
我正在将我的React应用重写为Typescript，但在重写我的HOC时遇到了麻烦。这是一个用于会话的临时会话。以下是我的withSession.tsx HOC： import React from 'react'
import { connect } from 'react-redux'
import { selectors } from 'redux/tokens'
import { Tokens } from 'redux/tokens/types'
import { SessionContext } from
浏览 116提问于2020-01-21得票数 0
1回答
我正在尝试做一个新的反应应用程序和渲染使用我的布局第一方法，没有任何在我的屏幕上。这是我使用的代码->
App.js
import React from "react";
import HomeLayoutHOC from "./HOC/Home.Hoc";
import Temp from "./Component/temp";
function App() {
return (
<>
<HomeLayoutHOC path="/" exact component={Temp}
浏览 8提问于2022-01-26得票数 -2
我正在尝试将react-router-dom更新为v6，在我的TypeScript React应用程序中。
在中，简单地说：
在升级到v5.1的同时，您应该用钩子替换withRouter的任何用法。
它完全忽略了类组件！
我在网上搜索了很长一段时间，但是我找到了所有的文章
谈论JavaScript而不是TypeScript，或
谈论函数组件，或
参考v5 (或更低)的react-router-dom，因为他们谈论withRouter。
是否有一种在TypeScripp function应用程序中将function路由器-dom升级为v6的方法，它不需要将所有类组件重
浏览 3提问于2021-11-30得票数 5
1回答
我有一个高阶组件，它接受另一个组件作为参数，并返回修改后的组件。我是新手，我对代码中的return语句感到困惑。
import React, { useState } from "react";
const HOC = (OriginalComp) => {
function NewComp() {
const [money, setMoney] = useState(10);
const handleIncrease = () => {
setMoney(money * 2);
};
return <Orig
浏览 7提问于2022-10-07得票数 0
1回答
我想要编写一个简单的组件，它确实克隆了它的子组件，并向它添加了一个marginBottom: 30。
这确实很好，使用<View>作为兄弟。不幸的是，它不能使用作为同级组件的组件。
CustomListItem组件：
// @flow
import * as React from 'react';
type Props = {
children: React.Node,
};
/**
*
*/
function CustomListItem ({ children }: Props) {
return React.Children.map(child
浏览 2提问于2017-12-20得票数 0
回答已采纳
1回答
我目前正在编写一个React项目(使用redux并重新组合)，并试图将我的redux状态传递给我的连接内的调度。
我想避免编写两次连接代码，但为了使currentLocaleCode出现在状态，我不得不这样做，以便调度可以从本地状态获取它。
这是怎么看的：
export default compose(
connect(
(
{
locales: { currentLocaleCode }
}
) => ({ currentLocaleCode })
),
connect(null, (dispatch) => (
浏览 2提问于2019-03-26得票数 0
我正在做一个用Webpacker构建ES6反应应用程序的项目。我们使用ESLint来保持脚本与一些预提交挂钩保持整洁，但有一个问题我一直未能解决。我们使用了几个React.Component子类，它们没有被ESLint检测为Components。
示例组件：
/* AsyncComponent.jsx */
export default class AsyncComponent extends React.Component {
// Sub-classes will define _render() instead of render()
render() {
if (thi
浏览 0提问于2019-04-09得票数 1
回答已采纳
在以前的function中--阿波罗，现在也是在中，可以通过传递一个函数将API的响应映射到另一种格式：
config.props属性允许您定义一个使用道具的映射函数.并允许您计算一个新的道具
该特性提供了一种方法，通过在其他地方定义阿波罗专案，从组件中删除丑陋的转换代码，而且由于它只在数据更改时运行，因此不需要回忆录。
我不知道如何用useQuery来做这件事。钩子只能直接在React ()中使用，所以我所能想到的就是：
import { fooQuery, mapFoo } from 'api';
...
const { data } = mapFoo(useQue
浏览 1提问于2019-09-23得票数 1
在Mobx + React应用程序中，我使用国际化行为。请参见以下示例：
import React, { Component } from 'react'
import {
InjectedTranslateProps,
translate
} from 'react-i18next'
import {
IPropsBase,
IStateBase
} from './interfaces'
class HomeClass extends Component<IPropsBase & InjectedTransl
浏览 0提问于2018-03-09得票数 1
1回答
我有React组件，我需要重写它来重新组合。我不知道如何正确地做这件事。你能帮帮我吗? import React, { Component } from "react";
import autosize from "autosize";
class Textarea extends Component {
componentDidMount() {
this.textarea.focus();
autosize(this.textarea);
}
render() {
return (
<textar
浏览 27提问于2019-04-01得票数 0
我正在使用阿波罗客户端进行一个React项目，并且正在进行一个cache.writeQuery()调用，这将导致相关查询组件的重新呈现。
详细信息请参见代码：
cache.writeQuery()：
cache.writeQuery( {
query : serverQueries.searchMessages,
variables : {
labelId : labelId,
searchTerms : searchTermsString ? searchTermsString : null,
)
},
浏览 0提问于2019-05-15得票数 0
回答已采纳
嗨，我是一个很新的反应。我已经使用react热键在我的react应用程序中实现了键盘快捷键。
该插件基本上要求将呈现的代码包装在以下标记中
<Hotkeys>
// Component render output
</Hotkeys>
现在如何测试这种组件呢？我写了一个这样的测试用例
it('Shows text passed', () => {
var expected = [1,2,3,0];
const wrapper = renderer.create(<HomePageRow title={'Home Row Title
浏览 0提问于2017-12-19得票数 0
从React Hooks FAQ中，我们了解到钩子可以替换HOCs并呈现返回/呈现单个组件的道具。 我试图更好地理解这一点，以及为什么这是一个事实。 让我们先来看看HOC： HOC是一个函数，它将组件作为参数，将其包装在周围的逻辑中，如效果和状态，并返回一个新的组件。自定义钩子到底是如何取代它的呢？我们仍然需要用其他逻辑包装输入函数的函数。 查看渲染道具： 呈现道具是我们作为道具传递给另一个组件的组件，然后这个组件会用一些新道具来呈现传递的组件。我想我们可以通过创建一个返回完整组件的自定义钩子来替换它，然后在任何需要的组件中使用该钩子。因此，父级不必将组件作为道具传递给它的子级。这就是钩子替
浏览 8提问于2019-06-03得票数 7
回答已采纳
1回答
我想知道，如果“高阶组件”没有实际的组件作为输入，但仍然返回组件，是否有意义。
下面的用例:我需要实现一个UI-Kit，包括一堆(自定义)输入字段，它们在样式上几乎相同，只是在类型、错误消息和其他一些小事情上有所不同。每个输入字段都由两个父div和实际html输入元素组成。
因为我从来没有见过这样的事情(我的想法)，我想知道我的方法是否接近现实世界。
我有高级组件或高阶布局。
import React, { PureComponent } from 'react';
export default handler => staticProps =>
class
浏览 0提问于2018-03-14得票数 1
2回答
为了减少重复代码，我尝试将API取取器实现为可重用的组件。
如何将子组件传递给这个ApiFetcher，以便它呈现特定的子组件而不是硬编码的组件？
此外，我的CompanyProfile组件是以一种有效的方式编码，还是有优化的空间？
import React from "react";
import { useState, useEffect } from "react";
function ApiFetcher(props) {
const [error, setError] = useState(null);
const [isLoaded, se
浏览 3提问于2021-04-03得票数 2
回答已采纳
1回答
我有以下标准的react管理结构设置，一切都按预期工作，资源从GET_LIST和GET_ONE的端点获取数据，问题是我想测试CandidateView组件，我不知道如何传递一些模拟的数据来检查呈现时它将包含所有预期的数据。
<Admin
title="Admin"
dashboard={Home}
dataProvider={restProvider}
history={history}
loginPage={Login}
menu={Menu}
>
<Resource
name="
浏览 0提问于2018-08-17得票数 3
回答已采纳
我使用阿波罗客户端2与反应。当查询完成加载时，是否有回调？
我正在制作一个用户的帐户页面。电子邮件字段应该显示用户的电子邮件。我可以使用我的graphQL查询获得这个值，但是只有在组件已经挂载之后，加载才会完成。因此，我不能使用componentDidMount。是否有回调或事件，我使用setState和填充电子邮件字段的方式？
import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
class Accou
浏览 0提问于2018-01-24得票数 1
回答已采纳
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
回答已采纳
1回答
我正在构建自己的复选框和无线电组件，这样我就可以一次又一次地重用它。
会是这样的
import React, { Component } from 'react'
export class Checkbox extends Component {
render() {
return (
<input type={this.props.type === 'checkbox' ? 'checkbox' : 'radio'} placeholder={this.props.label
浏览 0提问于2018-08-16得票数 1
回答已采纳
哪个专案会把另一个包裹起来。用多个HOCs包装的顺序在反应中是否重要？我已经创建了多个HOCs、、withSocket、、withSocket等等。我应该担心深层次的丑陋嵌套，这会对组件的性能产生影响吗？
浏览 1提问于2018-03-20得票数 13
回答已采纳
1回答
我对来自的以下代码(可在上获得)中的导出魔术感到困惑：
import React, { Component } from 'react';
import withFirebaseAuth from 'react-with-firebase-auth'
import firebase from 'firebase/app';
import 'firebase/auth';
import firebaseConfig from './firebaseConfig';
import logo from './lo
浏览 0提问于2021-07-16得票数 1
回答已采纳
我的react本机项目中有以下App.js：
class App extends Component {
render() {
return (
<ApolloProvider store={store} client={client}>
<AppWithNavigationState />
</ApolloProvider>
);
}
}
export default App = codePush(App);
我试图在我的项目()中添加aws放大认证器，但
浏览 0提问于2018-01-26得票数 0
回答已采纳
2回答
如果我需要从钩子中获取数据，那么使用的最佳方法是什么？
我有两个选择：
将从钩子接收到的数据作为参数传递给
特设：
export const withAuth = (
isAuth: boolean,
{
ComponentForAuthorized,
ComponentForUnauthorized,
}: {
ComponentForAuthorized: () => JSX.Element;
ComponentForUnauthorized: () => JSX.Element;
}
) => {
cons
浏览 4提问于2022-08-12得票数 -1
3回答
我目前正在一个django react身份验证应用程序上跟踪一个tuto，我遇到了一个问题。在教程中，当在导航条上选择子组件时会显示，但是，当我传递{ white }参数时，我得到的只是一个白页。
这是我的密码：
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Layout from './hocs/Layout';
import Home from './containers/Ho
浏览 1提问于2022-01-19得票数 0
我有一个组件，它包装在一个材料-UI withStyles特别和反应memo特设。
我无法测试这个组件，因为我无法调用dive()。
ShallowWrapper::dive() can only be called on components
我目前知道的唯一选择是独立地使用export Demo和export default withStyles(styles)(Demo)。这允许我测试没有包装在withStyles中的组件。我想避免这种方法。
如果删除memo()，就可以测试组件。同样，如果删除withStyles()，也可以测试组件。这些HOCs的结合使我的组件无法测试。
有哪些可用的
浏览 1提问于2019-03-05得票数 9
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
