javascript - 模拟更改不适用于 formik 的选择元素
问题描述
我正在尝试测试一些formik 的选择元素,而模拟更改不起作用。
而对于 formik 的输入元素,相同的模拟更改效果很好。
零件:
<Field
type="text"
name={'clientsData.language1_id'}
className={this.props.classes.textField}
label="Primary Language"
select
margin="normal"
variant="outlined"
component={TextField}
InputLabelProps={{
shrink: true
}}>
}}>
{this.props.languages.map(val => (
<MenuItem key={val.id} value={val.id}>
{val.value}
</MenuItem>
))}
</Field>
安装包装:
wrapper = mount(
<Router history={hist}>
<ClientsContacts
clientsData={clientsData}
languages={languages}
gender={gender}
race={race}
genders_identified={genderIdentified}
actions={{ getDictionaryApiCall: mockGetDictionaryApiCall, getListApiCall: mockGetListApiCall }}
/>
</Router>
)
模拟更改和一些控制台日志以便更好地理解:
console.log(
wrapper
// .find('Select')
.find('input')
.at(6)
.debug()
)
wrapper
.find('input')
.at(6)
.simulate('change', { target: { value: '122344556644', name: 'clientsData.language1_id' } })
console.log(
wrapper
.find('input')
.at(6)
.props()
)
console.log 截图:
上面的控制台日志屏幕截图显示,即使在模拟更改后,值也没有改变。
解决方案
我能够通过直接使用 props.onChange 来修复它
wrapper
.find('SelectInput')
.at(0)
.props()
.onChange({ target: { id: 1, value: 'American Sign Language', name: 'clientsData.language1_id' } })
wrapper.update()
推荐阅读
- reactjs - 如何在 WebView (react-native-webview) 中注入 React 组件?
- android - LiveData 不更新
- python - 如何将 Python 类实例方法调用一次限制为一个?
- postgresql - 服务器意外关闭连接 PSQL 复制
- jenkins - Jenkinsfile:如何根据分支名称参数化凭据 ID?
- javascript - 将 tensorflow.js 放入 React 组件中
- c# - 如何在 Razor Pages 中更改 DisplayFor 返回的文本?
- javascript - 如何在表格中添加链接
- swift - 如何快速将值与 Payfort 特定的验证 OTP 集成?
- mysql - 使用 vb.net 中的 datagridview 从数据库显示数据的问题