Formik 字段更改文本与反应测试库

Question

在尝试测试 formik 字段更改时，我没有得到更新的值

考虑以下形式

import React from "react";

import { Formik, Form, Field } from "formik";

export function SomeForm({
  initialValues = {},
  onTextChange,
  onTextBlur,
  onTextFocus
}) {
  return (
    <Formik initialValues={initialValues}>
      <Form>
        <label htmlFor="text">Text</label>
        <Field
          name="text"
          id="text"
          onChange={onTextChange}
          onBlur={onTextBlur}
          onFocus={onTextFocus}
        />
      </Form>
    </Formik>
  );
}

以下测试失败

import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import React from "react";

import { SomeForm } from "./SomeForm";
describe("SomeForm", () => {
  it("initializes", async () => {
    const onTextChange = jest.fn((e) => e.persist());
    const onTextBlur = jest.fn();
    const onTextFocus = jest.fn();
    render(
      <SomeForm
        initialValues={{ text: "someText" }}
        onTextChange={onTextChange}
        onTextBlur={onTextBlur}
        onTextFocus={onTextFocus}
      />
    );
    const textInput = screen.getByLabelText("Text");
    fireEvent.focus(textInput);
    expect(textInput.value).toBe("someText");
    textInput.focus();
    expect(onTextFocus).toHaveBeenCalled();
    textInput.blur();
    expect(onTextBlur).toHaveBeenCalled();
    fireEvent.change(textInput, { target: { value: "newValue" } });
    await waitFor(() => {
      expect(onTextChange).toHaveBeenCalled();
      expect(textInput.value).toBe("newValue");
    });
  });
});

它说最后一个断言是错误的

Expected: "newValue" Received: "someText"

我不确定我做错了什么，但如果我触发更改，我希望该值是新值。

Answer 1

似乎将 onChange 传递给字段会导致其行为异常并且不会更新值。

像这样的解决方案将使其通过。

import React from "react";

import { Formik, Form, Field } from "formik";

export function SomeForm({
  initialValues = {},
  onTextChange,
  onTextBlur,
  onTextFocus
}) {
  return (
    <Formik initialValues={initialValues}>
      <Form>
        <label htmlFor="text">Text</label>
        <Field
          onFocus={onTextFocus}
          name="text"
          id="text"
          component={({ field, ...other }) => (
            <input
              type="text"
              {...other}
              {...field}
              onChange={(e) => {
                field.onChange(e);
                onTextChange(e);
              }}
              onBlur={(e) => {
                field.onBlur(e);
                onTextBlur(e);
              }}
            />
          )}
        />
      </Form>
    </Formik>
  );
}

注意在呈现的组件中使用“field.onChange”的 onChange。

Formik 字段更改文本与反应测试库

Formik field change test with react resting library

formik

react-testing-library