文章/答案/技术大牛

发布

社区首页 >问答首页 >测试材料Ui (v5)抽屉-不能读取属性'scrollTop‘的空

问测试材料Ui (v5)抽屉-不能读取属性'scrollTop‘的空
EN

Stack Overflow用户

提问于 2021-10-22 21:56:28

回答 2查看 3K关注 0票数 0

这是一个简单的例子，说明了这个问题。(切换到浅层测试并不是真正测试的选择)。但在materialui v4中并没有发生这种情况。(只在升级至梅v5后)

it('Test Drawer', () =>
{
    enzyme.mount(<Drawer  
        open={true}
    >
        <div>hello world</div>
    </Drawer>);        
})

产生以下错误：

TypeError: Cannot read property 'scrollTop' of null
    at reflow (node_modules\@mui\material\node\transitions\utils.js:9:29)
    at $SOMEPATH\node_modules\@mui\material\node\Fade\Fade.js:94:24
    at Object.onEnter (node_modules\@mui\material\node\Fade\Fade.js:87:9)
    at Transition.performEnter (node_modules\@mui\material\node_modules\react-transition-group\cjs\Transition.js:283:16)
    at Transition.updateStatus (node_modules\@mui\material\node_modules\react-transition-group\cjs\Transition.js:249:14)
    at Transition.componentDidMount (node_modules\@mui\material\node_modules\react-transition-group\cjs\Transition.js:193:10)
    at commitLifeCycles (node_modules\react-dom\cjs\react-dom.development.js:20663:24)
    at commitLayoutEffects (node_modules\react-dom\cjs\react-dom.development.js:23426:7)
    at Object.invokeGuardedCallbackProd (node_modules\react-dom\cjs\react-dom.development.js:3862:10)
    at invokeGuardedCallback (node_modules\react-dom\cjs\react-dom.development.js:4056:31)

lib版本

"react": "^17.0.2",
"@mui/material": "^5.0.4",
"enzyme": "^3.9.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",

现在是v4 -> v5迁移指南他说

“您需要确保子级将自定义组件的引用转发到DOM。”

这是我尝试过的

        let r = React.createRef();

        enzyme.mount(<Drawer
            ref={r}
            open={true}
        >
            <div>hello world</div>
        </Drawer>);

但是这并没有什么区别，而且文档的Drawer示例没有传递一个参考文件。

如何安装测试Drawer？这只发生在测试中(而不是真正的运行时)。

更新：

测试安装Modal也会做同样的事情：

it('test Modal', () =>
{
    const wrapper = enzyme.mount(<Modal open={true}><div>hello</div></Modal>);

    console.log(wrapper.debug());
})

因此产生这个错误：

TypeError: Cannot read property 'scrollTop' of null
at reflow (node_modules\@mui\material\node\transitions\utils.js:9:29)
at $SOMEPATH\node_modules\@mui\material\node\Fade\Fade.js:94:24
at Object.onEnter (node_modules\@mui\material\node\Fade\Fade.js:87:9)
at Transition.performEnter (node_modules\@mui\material\node_modules\react-transition-group\cjs\Transition.js:283:16)
at Transition.updateStatus (node_modules\@mui\material\node_modules\react-transition-group\cjs\Transition.js:249:14)
at Transition.componentDidMount (node_modules\@mui\material\node_modules\react-transition-group\cjs\Transition.js:193:10)
at commitLifeCycles (node_modules\react-dom\cjs\react-dom.development.js:20663:24)
at commitLayoutEffects (node_modules\react-dom\cjs\react-dom.development.js:23426:7)
at Object.invokeGuardedCallbackProd (node_modules\react-dom\cjs\react-dom.development.js:3862:10)
at invokeGuardedCallback (node_modules\react-dom\cjs\react-dom.development.js:4056:31)

但是，测试内部Fade组件是没有错误的。

it('test Fade', () =>
{
    const wrapper = enzyme.mount(<Fade in={true}><div>hello</div></Fade>);

    console.log(wrapper.debug());
})

material-ui

mocha.js

enzyme

回答 2

Stack Overflow用户

发布于 2022-03-21 02:38:24

它帮助我把我想要显示在里面的内容用100 in放在一个盒子里

<Box minHeight="100vh">{children}</Box>

票数 1

Stack Overflow用户

发布于 2021-10-26 18:49:58

解决办法-在Drawer或任何基于Modal的组件上应用以下支持(例如。( Dialog)在运行测试时禁用传输。

const disableTransitionProps = {
        disablePortal: true,
        hideBackdrop: true,
        TransitionComponent: ({ children }) => children
      };


enzyme.mount(<Drawer          
        open={true}
        {...disableTransitionProps }
    >
        <div>hello world</div>
    </Drawer>);

更新

我在一个反应环境中完成了解决方案。

// ModalProps.Context.jsx
import React from 'react';

const ModalPropsContext = React.createContext({});

// for unittest - workaround MUI c5 (5.0.5) Transitions bugs when runing tests.
export const DefaultForTests = {value : {
                disablePortal : true,
                hideBackdrop: true,
                TransitionComponent: ({ children }) => children
            }}

// For unittests            
export const MountRendererPropsForModalComponents = {wrappingComponent : ModalPropsContext.Provider, wrappingComponentProps : DefaultForTests};

export default ModalPropsContext;

人们可以这样使用它：

import {MountRendererPropsForModalComponents} from 'ModalPropsContext.jsx'

然后：

const wrapper = enzyme.mount(<SomeComponentThatContainsModalComponents />, MountRendererPropsForModalComponents);

然后，您只需在使用ModalPropsContext组件的组件中导入和使用Modal。

例如：

<Dialog 
   {...this.context}

在生产代码中，this.context是{}，但在测试代码中，它返回解决方案所需的disablePortal、hideBackdrop和TransitionComponent支持。

有关如何使用上下文的更多信息，请参见react上下文文档 -(类和功能组件不同)。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69683445

复制

相似问题

问测试材料Ui (v5)抽屉-不能读取属性'scrollTop‘的空
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问测试材料Ui (v5)抽屉-不能读取属性'scrollTop‘的空EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问测试材料Ui (v5)抽屉-不能读取属性'scrollTop‘的空
EN