小编Him*_*ngh的帖子

所以我开始使用Jest和Enzyme设置单元测试由Material-UI组件组成的React组件.到目前为止,每个事件模拟都正常工作,直到我从Material-UI遇到Select组件.(更多信息如下)

项目是使用create-react-app引导的,并使用了材料-ui-next.

依赖版本

• 反应:16.2.0
• React-Dom:16.2.0
• React-Scripts:1.1.1
• 材料用户界面:1.0.0-beta.35
• 开玩笑:装满设置的一个(22.4.3)
• 酶:3.3.0
• 酶适配器反应16:1.1.1

问题

我有一个名为FiltersDesktop的纯功能组件,由Material-UI表单字段组成.其中三个是Select组件,其他是来自material-ui的文本字段和日期选择器.

UI代码

<Collapse in={props.visible} className={'filters-container-desk'}>
  <Grid container classes={{ typeContainer: "filter-container" }} id={'container-desk'}>

    <Grid item lg={2} xl={2}>
      <FormControl fullWidth={true}>
        <InputLabel htmlFor="sources">Sources</InputLabel>
        <Select
          open
          inputProps={{ name: 'sources-desk', id: 'sources-desk' }}
          value={props.filters.source || ''}
          onChange={(event) => props.updateFilter({ source: event.target.value })}
        >
          <MenuItem value=''>
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Grid>

    <Grid item lg={2} xl={2}>
    ...
    </Grid>
    ... // More Grid components of similar structure as above …

在将其标记为重复之前，请先阅读

因此，我浏览了所有建议的问题，并做了近 2 天的研究来找出问题背后的原因。

这是我所拥有的 -

1.一个名为 SignIn 的组件，具有连接到 redux 存储的某些本地状态。

class SignIn extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoading: false };
  }
  render () {
    isLoading
    ? <SomeLoadingComponent />
    : <MainSigninComponent />
  }
}
export default ConnectedSignIn = connect(mapStateToProps)(SignIn);

现在，您可以看到 SignIn 的渲染输出随着本地状态的变化而变化，我打算对这两个输出进行快照测试。

所以我写了两个测试用例。

// This one is alright as it test on the default state and renders the actual SigninComponent.
test(`it renders correctly`, () => {
  const wrapper = shallow(<ConnectedSignIn {...props} />, { context: { …