Dom-testing-library: 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 { TextField } from "office-ui-fabric-react";
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 (

);
};
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 }
})(() => );
const store = createStore(combineReducers({ form: reduxFormReducer }), {});
const result = render(


);
// 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: https://github.com/testing-library/user-event/issues/316

[kentcdodds]

@all-contributors please add @nanivijay for bugs

[allcontributors[bot]]

@kentcdodds

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

[kentcdodds]

Thanks :)

[kentcdodds]

:tada: This issue has been resolved in version 11.3.1 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[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

[nickmccurdy]

@kentcdodds I migrated this over from user-event but if you want to keep potential bugs tracked on the original repo I can move it back. Alternatively we can keep everything here and release backports if there's demand for it.

[kentcdodds]

Thank you!

[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