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

Question

我是新来的反应测试库。我想测试用material的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 显示E 213E 114h3E 215在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是否被封装在测试通过的隐藏元素中。但是将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();
});

Reference：https://github.com/enzymejs/enzyme/issues/2179 (尼柯拉斯对2019年9月9日的评论)