Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fire event type is not updating the redux form store value with latest version of react-testing-library

See original GitHub issue

@testing-library/react version: 10.2.1
@testing-library/user-event version: 11.2.1
Testing Framework and version: Jest v24
DOM Environment:

Relevant code or config:

import React from "react";
import { Provider } from "react-redux";
import { combineReducers, createStore } from "redux";
import { reducer as reduxFormReducer, reduxForm, Field } from "redux-form";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

const RenderTextField = additionalProps => props => {
  const fabricProps = getFabricPropsFromReduxFormProps(props);
  return (
    <div>
      <TextField {...additionalProps} {...fabricProps} />
    </div>
  );
};
const getFabricPropsFromReduxFormProps = props => {
  const {
    input,
    id,
    type,
    rows,
    placeholder,
    label,
    autoComplete,
    required,
    disabled
  } = props;
  const { onBlur, ...inputRemaining } = input;
  const typedType = type;
  // wrapping onBlur without event object due to issue: https://github.com/erikras/redux-form/issues/2768
  return {
    ...inputRemaining,
    onBlur: () => onBlur(undefined),
    id,
    type: typedType,
    rows,
    placeholder,
    label,
    autoComplete,
    required,
    disabled
  };
};
test("RenderTextField sets initial value and responds to change", async () => {
  const title = "title-text";
  const component = RenderTextField({ title });
  const label = "label-text";
  const initialValue = "test";
  const formName = "foo";
  const fieldName = "bar";
  const onChange = jest.fn();
  const onBlur = jest.fn();
  const fieldProps = {
    autoComplete: "off",
    component,
    id: "id-text",
    key: "key-text",
    label,
    name: fieldName,
    onChange,
    onBlur,
    placeholder: "placeholder-text",
    required: true,
    rows: 2,
    type: "text"
  };
  const TestForm = reduxForm({
    form: formName,
    initialValues: { [fieldName]: initialValue }
  })(() => <Field {...fieldProps} />);
  const store = createStore(combineReducers({ form: reduxFormReducer }), {});
  const result = render(
    <Provider store={store}>
      <TestForm />
    </Provider>
  );
  // expect(result.container).toMatchSnapshot();
  expect(store.getState()).toEqual({
    form: {
      [formName]: expect.objectContaining({
        values: { [fieldName]: initialValue }
      })
    }
  });
  const input = result.getByLabelText(label);
  const newValue = "newvalue";
  userEvent.clear(input);
  await userEvent.type(input, newValue, { allAtOnce: true });
  expect(onChange).toHaveBeenCalledTimes(2);
  expect(store.getState()).toEqual({
    form: {
      [formName]: expect.objectContaining({ values: { [fieldName]: newValue } })
    }
  });
});