Material UI + React 测试库：升级到版本 4 后单元测试选择菜单项中断

Question

我有一个使用 Jest 和 React 测试库的单元测试，它填写并提交了一个表单。问题是在将 Material UI 升级到版本 4 后，我的单元测试无法选择一个选项。错误是：“无法找到带有文本的元素：巴西”巴西是我要选择的文本选项。使用 Material UI 版本 3 运行良好。

---

测试代码 - 给出错误：“无法找到带有文本的元素：巴西。”

---

fireEvent.click(getByTestId("id-country"));
const countryOption = await waitForElement(() => getByText("Brazil"));
fireEvent.click(countryOption);

---

React 组件代码

---

<Grid item xs={12} sm={4}>
        <TextField
            id="select-country"
            name="country"
            select
            helperText={touched.country ? errors.country : ""}
            error={touched.country && Boolean(errors.country)}
            required
            label="Country"
            onChange={handleChange}
            value={values.country}
            className={classes.selectField}
            SelectProps={{
                SelectDisplayProps: {
                    "data-testid": "id-country"
                }
            }}
        >
            {countryEnum.map(country => (
                <MenuItem key={country.type} value={country.type}>
                    {country.label}
                </MenuItem>
            ))}
        </TextField>
</Grid>

Answer 1

对于 v4，Select 更改为在 mouseDown 上打开而不是 click (https://github.com/mui-org/material-ui/pull/17978)。

所以而不是：

fireEvent.click(getByTestId("id-country"));

你应该有：

fireEvent.mouseDown(getByTestId("id-country"));