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

Question

我是 React 测试库的新手。我想测试用 material UI 的 Hidden 组件包裹的代码，但测试失败（即使我的组件在 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 shows h3 in DOM

但我不明白为什么将其设置为 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

Answer 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 日评论）

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

React Testing Library + Material UI (v4) Hidden component

testing

reactjs

material-ui

react-testing-library