reactjs - Formik 表单的单元测试中的状态未更新
问题描述
我正在学习如何使用 React 和 Formik。我正在编写一些单元测试,但我遇到了一个问题,即我的组件没有获得更新状态的更新值。这是我的表格。
const ItemForm = ({values, item}) = {
const {amount} = item;
const {saveItem } = itemProvider();
const doSaveItem = () => {
saveItem(values);
};
const editingBlock = isEditing ?
<div>
<InputLabel htmlFor="amount">Amount</InputLabel>
<Field
component={TextField}
name="amount"
id="amount"
inputProps={{
'aria-label': 'edit-amount'
}}
/>
</div>
) : (
<div aria-label="amount">
Amount:${amount}.00
</div>
</>
return (
<>
<IconButton aria-label="Save" onClick={doSaveItem} type="submit">
<CheckIcon />
</IconButton>
{editingBlock}
</>);
};
}
const ItemListingFormik = ({item}) => {
return (
<Formik
initialValues={item}
children={(formProps) => <ItemForm {...formProps} item={item} />}
/>
);
};
然后我有一个单元测试,用于测试在输入中输入金额后金额(原始金额为 25)是否更新(到 34)。这不起作用,并且在按下保存后金额不会更新。但是,如果我将 doSaveItem 更改为:
const doSaveItem = () => {
item.amount = values.amount;
saveItem(item);
};
有谁知道这可能是为什么?我的单元测试:
it('test', async () => {
const sampleItem = {
amount: '25'
};
render(
<itemProvider>
<ItemListingFormik item={sampleItem} />
</itemProvider>
);
const amtInput = screen.getByLabelText('edit-amount');
fireEvent.change(amtInput, { target: { value: "34" } });
const saveBtn = screen.getByLabelText('Save');
fireEvent.click(saveBtn);
expect(screen.getByLabelText('amount')).toBe('Amount:$34.00')
});
解决方案
推荐阅读
- javascript - 服务器找不到 javascript 文件
- linux - 有没有办法限制进程在linux上只能使用本机的一个ip?
- javascript - 我有一个对象数组,每个对象都有属性 player,它是一个包含属性 summenerName 的对象。找到特定的召唤者名称对象?
- machine-learning - 您为既被遮挡又被截断的对象分配什么标签?
- python - 比较列表一的任何值是否大于另一个列表中的任何值?
- wagtail - 如何在 Wagtail 的 SnippetChooserPanel 中自定义查询集?
- azure - 如何在 Azure DevOps 中为 Azure App Service 设置 ConnectionString 配置?
- uwp - 如何在 UWP 应用中将 GIF 图片制作为 SplashScreen?
- php - 使用 PHP 脚本获取 Heroku 环境变量
- php - 如何使用磁贴在数据库中显示图像