酶未模拟React Material-UI v1上的更改事件-选择组件

因此，我开始使用Jest和Enzyme设置对由Material-UI组件组成的React组件进行单元测试。到目前为止，每个事件模拟都运行良好，直到遇到Material-UI中的Select组件。（以下更多信息）

使用create-react-app引导了项目，并使用了material-ui-next。

依赖版本

• 反应：16.2.0
• React-Dom：16.2.0
• 反应脚本：1.1.1
• 材质用户界面：1.0.0-beta.35
• 开玩笑：附带安装程序的一个（22.4.3）
• 酵素：3.3.0
• 酶适配器React 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
  </Grid>
</Collapse>

当我尝试在textfield组件上模拟change事件时，它工作正常。以下是我为测试文本字段编写的代码：

TextField的测试代码

const props = {
  updateFilter: jest.fn()
};

test(`updateFilter should get called on simulating text changes in domain`, () => {
  const component = mount(<FiltersDesktop {...this.props} />);
  component.find('#domain-desk').last().simulate('change', { target: { value: 'scoopwhoop.com' } });
  expect(props.updateFilter).toHaveBeenCalled();
});

但是类似的内容不适用于Select组件。但是，当我实际上通过接口与Select字段交互时，会调用update函数。以下是我为测试Select编写的测试代码：

选择测试代码

const props = {
  updateFilter: jest.fn()
};

test(`updateFilter should get called on simulating text changes in sources`, () => {
  const component = mount(<FiltersDesktop {...this.props} />);

  // Did not work
  component.find('#sources-desk').last().simulate('change', { target: { value: 20 } });

  // Did not work
  component.find('Select').first().simulate('change', { taget: { value: 20 } });

  // Did not work
  component.find('#sources-desk').forEach(element => element.simulate('change', { taget: { value: 20 } }))

  expect(props.updateFilter).toHaveBeenCalled();
});

由于某些原因，在上述所有情况下，find方法总是返回1个以上的元素，因此在适当的情况下，我会使用first，last和forEach。

请帮助我找出更改事件在模拟时未在Select组件上触发的原因。

请放心，我至少花了一周的时间阅读有关Github的问题，试图实施Jest和Enzyme的解决方案和测试指南。我确信我的测试设置可以正常使用，因为其他情况都可以正常工作。

如果您想精确地查看源代码，那么这里是存储库的链接。也欢迎在存储库上的拉取请求。如果您在存储库中，那么不要忘记切换到react-material分支。

PS-不要笑，因为我最近刚开始使用React：P