react-component / react-component/field-form

form.validateFields return error with `outOfDate:=true` in test

Open
#196 5 comments 3 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.