Fire event type is not updating the redux form store value with latest version of react-testing-library #639
Description
@testing-library/reactversion: 10.2.1@testing-library/user-eventversion: 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