react-component / react-component/field-form
form.validateFields return error with `outOfDate:=true` in test
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 286
- Avg merge
- 4d 16h
- Merged PRs (30d)
- 1
Description
The code works perfectly fine in the apps.
However, when I tested it using Jest, it will always return error upon calling form.validateFields().
The sample error returned is
{
values: { value: 'Updated' },
errorFields: [],
outOfDate: true
}
I try to look at the source code and it said outOfDate means change when validating.
Does anybody knows how to avoid this error?
Here is my sample test codes
test('should be able to update the values', async () => {
renderComponent()
const valueElem = await screen.findByText('value 1')
userEvent.click(valueElem)
const valueInput = await screen.findByTestId('editable-cell-input')
userEvent.clear(valueInput)
userEvent.type(valueInput, 'abc {enter}', { allAtOnce: false })
await waitFor(() => {
expect(screen.queryByTestId('editable-cell-input')).toBeNull()
expect(screen.getByText('value 1 Updated')).toBeDefined()
expect(updateInventoryValue).toHaveBeenCalledWith(1, {
value: 'value 1 Updated',
})
})
})
In apps
const save = async () => {
try {
const params = await form.validateFields()
toggleEdit()
handleSave(record.id, params)
} catch (errInfo) {
console.log(errInfo)
notification.error({
message: 'Something went wrong!',
description: 'Please try again.',
})
}
}
<Form form={form}>
<Form.Item
style={{
margin: 0,
}}
name={title}
>
<Input
ref={inputRef}
onPressEnter={save}
onBlur={save}
data-testid="editable-cell-input"
/>
</Form.Item>
</Form>
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the sample Jest test around form.validateFields(), userEvent, and waitFor, then compare its behavior with tests/legacy/async-validation.test.js. Trace when validation and field updates complete; done means the test has a clear expected outcome and no longer reports an unexpected outOfDate error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100