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

[nanivijay]

• @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 } })
    }
  });
});

What you did:

Unit testing redux form field change event

What happened:

Redux form field value is not updated in store

Reproduction:

Issue is happening in the below code
https://codesandbox.io/s/basic-react-testing-library-w-setuptestsjs-skclz?file=/src/Sample.test.js:0-2582

Issue is not happening with the older versions of libraries
https://codesandbox.io/s/basic-react-testing-library-w-setuptestsjs-u3lx8?file=/src/Sample.test.js

Problem description:

Store is not updated with the new value

Please help me what could be wrong here.

Thanks

[kentcdodds]

Hi @nanivijay,

I'm pretty sure this is related to this issue: testing-library/user-event#316

[kentcdodds]

@all-contributors please add @nanivijay for bugs

[allcontributors]

@kentcdodds

I've put up a pull request to add @nanivijay! 🎉

[kentcdodds]

Thanks :)

[kentcdodds]

🎉 This issue has been resolved in version 11.3.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[nanivijay]

@kentcdodds issue is still happening with the latest version of user-event library. here is the codesandbox url
https://codesandbox.io/s/basic-react-testing-library-w-setuptestsjs-skclz?file=/src/Sample.test.js

[kentcdodds]

Hi @nanivijay,

Sorry about that. I looked at it and there's a lot of moving parts in there it's hard for me to determine what the problem is. Could you do a little more digging please? Try to isolate the problem further?

[nanivijay]

@kentcdodds sure i will do

[nanivijay]

@kentcdodds during my investigation i found that the issue starts happening from @testing-library/dom - 7.9.0 . I updated the example to use fire event instead of userevent. fireevent was working till version 7.8.0. i looked at the change in v7.9.0 i didn't find any breaking change but you may have more context on the change. please take a look at this codebox https://codesandbox.io/s/basic-react-testing-library-w-setuptestsjs-u3lx8?file=/src/Sample.test.js

[nanivijay]

anyone get a chance to investigate this issue. This is currently blocking us to upgrade the @testing-library. i tried to identify the cause but couldn't be able to figure out. please help

[nanivijay]

Not seeing this anymore with the latest version