Question

我想在Typography属性为true时从Material-UI测试bio元素的存在。但是，我收到一个错误，提示没有收到该元素。请指教，谢谢。

MyComponent.js

const MyComponent = (props) => {
  const {
    classes,
    profile: { handle, createdAt, profileImage, bio, website, location}
  } = props;

  return (
    {bio && <Typography variant='body2'>{bio}</Typography>}
  )

  MyComponent.propTypes = {
    profile: PropTypes.object.isRequired,
    classes: PropTypes.object.isRequired
  }
}
export default withStyles(styles)(MyComponent)

MyComponent.test.js

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

  const myProps = {
    profile: {
        bio: 'this is a bio'
    }
  }

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

  it('should render a Typography element', () => {
    console.log(wrapper.debug(MyComponent));
    expect(wrapper.dive().find(Typography)).toHaveLength(1);
  })
})

错误

expect(received).toHaveLength(expected)

Expected length: 1
Received length: 0
Received object: {}

console.error node_modules/@material-ui/styles/mergeClasses/mergeClasses.js:36
Material-UI: the key `bio` provided to the classes prop is not implemented in MyComponent.
You can only override one of the following: paper,profile.
console.log src/components/MyComponent/MyComponent.test.js:36
<MyComponent classes={{...}} profile={{...}} />

如何对已解构道具的条件渲染进行单元测试？

0 个答案: