React 测试库 + Material UI (v4) 隐藏组件答案

【问题标题】：React Testing Library + Material UI (v4) Hidden componentReact 测试库 + Material UI (v4) 隐藏组件
【发布时间】：2022-01-07 17:51:23
【问题描述】：

我是反应测试库的新手。我想测试用 Hidden Material UI 组件包装的代码，但测试失败（即使我的组件在 DOM 中可见）。

组件

import { Hidden } from '@material-ui/core'
import React from 'react'

function App() {

    return (
        <>
            <h4>This is always visible</h4>
            <Hidden xsUp={true}>
                <h3>The hidden element</h3>
            </Hidden>
        </>
    )

}

xsUp 设置为 true 隐藏 在 DOM 中的 h3 和 false 显示 DOM 中的 h3

但我不明白为什么将其设置为 false 会导致以下测试失败，即使该组件在 DOM 中可见

测试

test("Hidden element should be visible", async () => {
  render(<App />);

  const h3 = await screen.findByRole('heading', { name: "The hidden element"}) // same effect if I use screen.getByRole or getByText

  expect(h3).toBeInTheDocument();
});

注意：我测试了 h3 是否未包含在测试通过的 Hidden 元素中。但是将 xsUp 设置为 true 或 false 会导致测试失败。

请在这里试用https://codesandbox.io/embed/magical-boyd-uzv9w?fontsize=14&hidenavigation=1&theme=dark

【问题讨论】：

标签： reactjs testing material-ui react-testing-library

【解决方案1】：

经过一番研究，我发现我可以用MuiThemeProvider 包装我的组件，如图所示，如果xsUp = false 则通过测试，如果xsUp = true 符合预期则失败

测试

import { render, screen } from '@testing-library/react'
import Greet from './Greet'
import { MuiThemeProvider } from '@material-ui/core';
import { createTheme } from '@material-ui/core/styles'
const theme = createTheme({ props: { MuiWithWidth: { initialWidth: 'xs' } } }) 


test("Hidden element should be visible", async () => {

  /*  render(<App />); */

  render(
    <MuiThemeProvider theme={theme}>
      <Greet />
    </MuiThemeProvider>

  );
  const h3 = await screen.findByRole('heading', { name: "The hidden element", hidden: true })
  expect(h3).toBeInTheDocument();
});

参考：https://github.com/enzymejs/enzyme/issues/2179（nicolasremise 于 2019 年 9 月 9 日发表评论）

【讨论】：