css 如何测试自定义样式的材质UI抽屉？

x1c 0d1x我尝试使用自定义样式在React应用中测试Material UI抽屉式组件，但在应用左侧位置时遇到问题。在浏览器开发工具中，我看到左侧位置（72 px）正确应用。然而，在单元测试中左侧：应用了0 px。看起来类的顺序没有正确计算。我将附上一个Devtools的截图，显示在浏览器中计算了正确的left属性。
我使用getComputedStyle来检查left的值，但它总是返回0 px，即使样式在浏览器中正确应用。我也尝试使用@testing-library/jest-dom中的toHaveStyle来检查样式，但它似乎不适用于left属性。我还尝试使用sx prop自定义样式，并将其传递给Drawer组件。但是左边的位置在测试中仍然不适用。我也尝试为左边的样式使用“！important”，但是没有帮助。下面是我尝试应用的样式的简化版本：

const createStyles = (sidebarVisible: boolean): SxStyles => ({
    drawer: {
        '.MuiDrawer-paper': {
            zIndex: 2,
            width: `${DRAWER_WIDTH}px`,
            left: '72px',
            right: '0px'
        },
    },
});

const styles = createStyles(sidebarVisible);

...

    return (
        <MuiDrawer
            className={props.className}
            sx={mergeSxStyles(styles.drawer, props.sx)}
            variant="persistent"
            anchor={'left'}
            open={isDrawerOpen}
            onClose={closeDrawer}
            data-testid="drawer-container"
        >
            {props.children}
        </MuiDrawer>
    );

以下是未通过的单元测试的特定部分：
x一个一个一个一个x一个一个二个x
当我注销getComputedStyle（muiDrawerPaper）时，我得到了以下值：

_values: {
        display: 'flex',
        'z-index': '1200',
        width: '288px',
        left: '0px',
        right: '0px',
        'background-color': 'rgb(255, 255, 255)',
        color: 'rgba(0, 0, 0, 0.9)',
        transition: 'transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
        'box-shadow': 'none',
        'overflow-y': 'auto',
        'flex-direction': 'column',
        height: '100%',
        'flex-grow': '1',
        'flex-shrink': '0',
        'flex-basis': 'auto',
        flex: '1 0 auto',
        position: 'fixed',
        top: '0px',
        outline: '0',
        'border-right-width': '1px',
        'border-right-style': 'solid',
        'border-right-color': '#CCCCCC',
        'border-right': '1px solid #CCCCCC',
        visibility: 'visible',
        'webkit-transform': 'none',
        transform: 'none',
        'webkit-transition': '-webkit-transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'
      },

这些值似乎部分来自. css-cycgv 2-MuiPaper-root-MuiDrawer-paper，因此由于某种原因，该类似乎优先于.“MuiDrawer-paper”。根据我的在线研究，这是由于JSDOM问题，我没有找到任何更新：https://github.com/facebook/jest/issues/8464
你知道我该如何测试抽屉是否应用了正确的样式吗？谢谢

您似乎遇到了JSDOM对CSS样式的处理问题，这导致在单元测试中错误地计算类的顺序。为了测试抽屉式工具是否应用了正确的样式，您可能需要考虑使用其他测试库或框架，以便更可靠地处理CSS样式。
您可以尝试的一个选项是React测试库，它提供了一组实用程序，用于以模拟用户与React组件交互的方式测试React组件。getComputedStyle函数在JSDOM提供的DOM环境中不可用，因此您可能希望使用React测试库提供的toHaveStyle匹配器。
下面是一个如何使用React Testing Library测试应用于抽屉组件的样式的示例：

import { render, screen } from '@testing-library/react';

test('drawer has correct left position', () => {
  render(<MyDrawerComponent />);
  const drawerContainer = screen.getByTestId('drawer-container');
  expect(drawerContainer).toHaveStyle({ left: '72px' });
});

此测试将呈现您的组件，并检查抽屉式容器元素的left样式属性是否与预期值“72 px”匹配。如果测试失败，它将提供一条比简单地将计算出的样式记录到控制台更有用的错误消息。
希望这能有所帮助！

css 如何测试自定义样式的材质UI抽屉？

1条答案

相关问题

热门标签

最新问答