React-Testing：调试，为什么使用材质UI的网格对该组件进行的这种开玩笑的快照测试失败

Question

我有一个使用Material UI Grid容器的可重用组件。我开玩笑地进行了简单的快照测试，正在收到消息

Summary of all failing tests
 FAIL  src/components/Form/__tests__/FormContentGrid.node.js
  ● renders correctly

    Warning: Failed prop type: The prop `xs` of `Grid` must be used on `item`.
        in WithStyles(ForwardRef(Grid))

      11 |       </LabelWrapper>
      12 |     </Grid>
    > 13 |     <Grid container spacing={1} xs={10}>
         |     ^
      14 |       {children}
      15 |     </Grid>
      16 |   </Grid>

这里是为测试编写的组件：

import React from 'react';
import PropTypes from 'prop-types';
import { Grid } from '@material-ui/core';
import { LabelWrapper, SideLabel } from './components';

const FormContentGrid = ({ label, children }) => (
  <Grid container spacing={1}>
    <Grid item xs={1}>
      <LabelWrapper>
        <SideLabel>{label}</SideLabel>
      </LabelWrapper>
    </Grid>
    <Grid container spacing={1} xs={10}>
      {children}
    </Grid>
  </Grid>
);

FormContentGrid.propTypes = {
  label: PropTypes.string,
  children: PropTypes.node,
};

export default FormContentGrid;

这里是测试：

import React from 'react';
import { shallow } from 'enzyme';

import FormContentGrid from '../FormContentGrid';

it('renders correctly', () => {
  const component = shallow(<FormContentGrid label="test" />);

  expect(component).toMatchSnapshot();
});

我正在尝试找出测试失败的原因以及如何修复它

Answer 1

看来，解决此问题的方法是在容器中将item设置为true。

<Grid container spacing={1} xs={10} item={true}>