测试是否呈现具有所需 PropTypes 的 Material-UI withStyles 组件？答案

【问题标题】：Test if Material-UI withStyles component with required PropTypes is rendered?测试是否呈现具有所需 PropTypes 的 Material-UI withStyles 组件？
【发布时间】：2020-07-10 02:18:24
【问题描述】：

我是单元测试的新手，并且在测试具有所需 propTypes 的 Material-UI withStyles 组件是否呈现子 Material-UI 元素时遇到了麻烦。

profile.js

const StaticProfile = (props) => {
  const { classes, profile } = props
}

return (
  <Paper>
    <div>
      <MuiLink></MuiLink>
      <Typography>
      <LocationOn>
      <LinkIcon>
      <Calendar>
    </div>
  </Paper>
)

profile.test.js

describe('<StaticProfile />', () => {
  let shallow;
  let wrapper;

  const myProps = {
    profile: {},
    classes: {}
  }

  beforeEach(() => {
    shallow = createShallow();
    wrapper = shallow(<StaticProfile {...myProps} />);
  })

  it('should render a Paper element', () => {
    expect(wrapper.find(Paper).length).toBe(1);
  })
})

但是，收到此错误后，似乎根本没有渲染组件。

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 0

有人可以指点我正确的方向吗？

【问题讨论】：

标签： reactjs jestjs material-ui

【解决方案1】：

您应该使用wrapper.dive().find(Paper)，因为StaticProfile 被withStyles 高阶组件包装。

试试这个：

it('should render a Paper element', () => {
  expect(wrapper.dive().find(Paper)).toHaveLength(1);
})

【讨论】：

谢谢，非常感谢！