使用 Controller API 测试 Enzyme 和 jest 中 Select 的 React-form-hook

Question

我想测试我的下面的选择并模拟更改事件。但目前 onchange 不起作用。从下拉列表中选择某些选项时，我想显示一个输入字段，但无法模拟 onchange 事件。 JSX 文件中的一切工作正常。但无法在测试文件中正确模拟。

    const accType = watch('accountType');
        <Controller
                control={control}
                name="accountType"
                label="Account Type"
                rules={{ required: true }}
                render={({ onChange, ref }) => (
                  <Select
                    onChange={(e) => onChange(e.target.value)}
                    className={styles.w100}
                    defaultValue={bankAccountTypes[0]}
                  >
                    {bankAccountTypes.map((type) => (
                      <MenuItem key={type} value={type}>
                        {type}
                      </MenuItem>
                    ))}
                  </Select>
                )}
              />

{
          accType === 'NRO Savings Account' ? (
            <Grid item={true} xs={12} className={`${styles.fieldItem}`}>
              <TextField
                InputLabelProps={{ shrink: true }}
                className={styles.w100}
                type="text"
                name="country"
                required={true}
                label="Country"
                inputRef={register({ required: true })}
              />
            </Grid>
          ) : null
        }

下面是我的测试文件

// Country Field should be hidden
let country = component.find({ name: 'country' });
expect(country).toHaveLength(0);

// Simulate Account type field to display Country Dropdown
await act(async () => {
  accountType.simulate('change', { value: 'NRO Savings Account' });
});

// Country field should be present now
country = component.find({ name: 'country' });
expect(country).toHaveLength(1);

//Expected length: 1
//Received length: 0

我在 React 中使用 Jest 和 Enzyme