测试是否渲染了具有所需PropTypes的样式组件的材质UI

Question

我是单元测试的新手，在测试具有所需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

有人能告诉我正确的方向吗？

Answer 1

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

试试这个：

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