tldr; fireEvent.change works, but on form submit, new value not found in submit handler.
Say we have a simple form:
// MyForm.tsx
class MyForm extends React.Component {
state = { data: '123' }
handleChange = (e: any) => {
// This never gets fired in the test, why?
console.log('HandleChange Fired', e.target.value)
this.setState({ data: e.target.value })
}
handleSubmit = () => {
console.log('************* HandleSubmit Fired **************', this.state)
}
render() {
return (
<form name="address" onSubmit={this.handleSubmit}>
<input name="title" value={this.state.data} onChange={this.handleChange} />
<button type="submit">Submit</button>
</form>
)
}
}
and a test to assert the form submission values are accurate:
// MyForm.spec.tsx
import React from 'react'
import { expect } from 'chai'
import { fireEvent, render, wait } from 'react-testing-library'
import { JSDOM } from 'jsdom'
import MyForm from './MyForm'
.
const dom = new JSDOM('<!doctype html><html><body><div id="root"><div></body></html>')
global.document = dom.window.document
global.window = dom.window
global.navigator = dom.window.navigator
.
describe.only('MyForm works!', () => {
it('Should change the value of the field', async () => {
const { container, debug } = render(<MyForm />)
const field: any = container.querySelector('input[name="title"]')
.
// Change the value
fireEvent.change(field, { target: { value: 'Hello World!' } })
expect(field.value).to.equal('Hello World!') // true
.
console.log('Field value: ', field.value) // prints 'Hello World!'
debug(field) // html is printed out in console, shows old value unexpectedly.
.
// Submit the form
const form: any = container.querySelector('form[name="address"]')
const onSubmit = fireEvent.submit(form)
expect(onSubmit).to.equal(true) // true, but form submit value is still the old one
})
})
Here are the test results:
Here are my versions:
"jsdom": "^11.5.1",
"mocha": "^5.1.1",
"react": "^16.8.4",
"react-testing-library": "^6.0.0"
"dom-testing-library": "3.17.1"
How do I get the form handleSubmit value to reflect the new input value after the onChange?
Related
I have a react component with a form. I want to unit test (using jest and RTL) if form gets submitted with correct data. Here are my component and unit test method:
Component:
class AddDeviceModal extends Component {
handleOnSave(event) {
const { deviceName } = event.target;
const formData = {
deviceName: deviceName.value,
};
this.props.onSave(formData);
}
render() {
return (
<Form onSubmit={this.handleOnSave}>
<Form.Label>Device Name</Form.Label>
<Form.Control name="deviceName" placeholder="Device Name" required />
<Button type="submit">Save Device</Button>
</Form>
);
}
}
Unit Test:
it("Test form submit and validation", () => {
const handleSave = jest.fn();
const props = {
onSave: handleSave,
};
render(<AddDeviceModal {...props} />);
const deviceNameInput = screen.getByPlaceholderText(/device name/i);
fireEvent.change(deviceNameInput, { target: { value: "AP VII C2230" } });
fireEvent.click(getByText(/save device/i));
});
However, in handleOnSave(), I get error as deviceName is undefined. For some reason, it is not able to get the textbox value from event.target. Am I doing something wrong in above code? Needed help in fixing this issue.
The problem you have it with trying to access the input directly from event.target. You should access it from event.target.elements instead: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements.
function handleOnSave(event) {
event.preventDefault();
const { deviceName } = event.target.elements;
const formData = {
deviceName: deviceName.value
};
// this will log the correct formData even in tests now
console.log(formData);
this.props.onSave(formData);
}
And here is your test:
it("Test form submit and validation", () => {
const { getByPlaceholderText, getByText } = render(<App />);
const deviceNameInput = getByPlaceholderText(/device name/i);
fireEvent.change(deviceNameInput, { target: { value: "AP VII C2230" } });
fireEvent.click(getByText(/Save Device/i));
});
I created a codesandbox where you can see this in action: https://codesandbox.io/s/form-submit-react-testing-library-45pt8?file=/src/App.js
I have a react app using Formik and Material-ui.
I grabbed the submit button html element,
But fireEvent is not working.
I think the issue is coming from Formik library layer.
'Button' component is a reusable material ui button.
'change fireEvent' tests are passed.
But I receive 'Expected mock function to have been called one time, but it was called zero times.' message for 'submit fireEvent'.
loginForm.test.js
import { Router, MemoryRouter } from 'react-router-dom';
import { queryByAttribute } from 'react-testing-library';
import React, { render, cleanup, fireEvent } from '../../../setupTests';
import LoginForm from '../../../../components/auth/login/loginForm';
afterEach(cleanup);
const mockSubmit = jest.fn();
const mockKeepMeLoggedIn = jest.fn();
const defaultProps = {
handleSubmit: mockSubmit,
isSubmitting: false,
userData: [],
keepMeLoggedIn: mockKeepMeLoggedIn,
};
const setUp = (props = {}) => {
const setupProps = { ...defaultProps, ...props };
const component = render(
<MemoryRouter>
<LoginForm {...setupProps} />
</MemoryRouter>,
);
const { container, getByTestId, getByText } = component;
const getByName = queryByAttribute.bind(null, 'name');
const usernameInput = getByName(container, 'username');
const passwordInput = getByName(container, 'password');
const getByType = queryByAttribute.bind(null, 'type');
const submitButton = getByType(container, 'submit');
return { component, usernameInput, passwordInput, submitButton };
};
describe('Login Form Component', () => {
it('simulate input type and click the form submit button', () => {
const { usernameInput, passwordInput, submitButton } = setUp();
fireEvent.change(usernameInput, { target: { value: 'yuch' } });
expect(usernameInput.value).toBe('yuch');
fireEvent.change(passwordInput, { target: { value: 'testpwd1234' } });
expect(passwordInput.value).toBe('testpwd1234');
fireEvent.click(submitButton);
expect(mockSubmit).toHaveBeenCalledTimes(1);
});
loginForm.js
...
import { Formik, Form } from 'formik';
/* --- Components --- */
import FormikField from '../../../shared/form/formikField';
import PasswordField from '../../../shared/form/passwordField';
import Button from '../../../shared/form/formButton';
const LoginForm = ({
keepMeLoggedIn,
keepLoggedIn,
userData,
handleSubmit,
loginValidation,
}) => {
const foundUsername = userData.length !== 0 ? userData[0].username : '';
const values = { username: foundUsername, password: '' };
return (
<Formik
initialValues={values}
validationSchema={loginValidation}
onSubmit={handleSubmit}
>
{({ isSubmitting }) => (
<div className="login-container">
<Form
className="flex flex-column-m center"
data-testid="form"
>
<FormikField
label="아이디"
name="username"
type="text"
icon="filledUser"
styleName="textField"
required
/>
...
<Button
typeValue="submit"
variantValue="contained"
buttonName="로그인"
className="login-btn"
isSubmitting={isSubmitting}
/>
</Form>
...
</div>
)}
</Formik>
);
};
button.js
import React from 'react';
import Button from '#material-ui/core/Button';
import { withStyles } from '#material-ui/core/styles';
const styles = theme => ({
...
});
const FormButton = ({
typeValue,
variantValue,
buttonName,
width,
isSubmitting,
classes,
className,
}) => {
...
return (
<Button
type={typeValue}
variant={variantValue}
color="primary"
size="small"
style={widthStyle}
className={`${className} ${classes.button}`}
disabled={isSubmitting}
>
{buttonName}
</Button>
);
};
Things I have tried.
[ To get submit button ]
const getByType = queryByAttribute.bind(null, 'type');
const submitButton = getByType(container, 'submit');
-> console.log(submitButton) // HTMLButtonElement
-> fireEvent.click(submitButton)
2.
const submitButton = getByText('로그인');
-> console.log(submitButton) // HTMLSpanElement
-> fireEvent.click(submitButton)
const submitButton = getByTestId('form');
-> console.log(submitButton) // HTMLFormElement
-> fireEvent.submit(submitButton)
[ form ]
1. html 'form' instead of 'Form' from Formik.
import { Formik, Form } from 'formik';
<Formik
initialValues={values}
validationSchema={loginValidation}
onSubmit={handleSubmit}
>
{({ handleSubmit, isSubmitting }) => (
<div className="login-container">
<form
className="flex flex-column-m center"
onSubmit={handleSubmit}
data-testid="form"
>
...
</form>
It actually has to do with how Formik handles the submit. Since it is using a promise, it takes at least a tick before the onSubmit call is being called.
Testing library has a wait utility which waits for a given time. But since we only need to wait for a single tick, we can just omit the duration.
First, import wait from react-testing-library. Then make your it function async and wrap the expect part with a wait function.
I've tested this with a click event on the submit button.
// import wait
import { wait } from 'react-testing-library';
// add async
it('simulate input type and click the form submit button', async () => {
const { usernameInput, passwordInput, submitButton } = setUp();
fireEvent.change(usernameInput, { target: { value: 'yuch' } });
expect(usernameInput.value).toBe('yuch');
fireEvent.change(passwordInput, { target: { value: 'testpwd1234' } });
expect(passwordInput.value).toBe('testpwd1234');
fireEvent.click(submitButton);
// wrap expect in `await wait`
await wait(() => {
expect(mockSubmit).toHaveBeenCalledTimes(1);
});
});
I'm trying to simulate onChange event with simulate function. I also have passed the second argument to mock event onChange as the value is part of the event. But somehow it gives me unexpected result as value that I have passed to the second argument returns undefined instead of new comment. Any idea of this issue?
CommentBox.js
import React from 'react';
class CommentBox extends React.Component {
state = {
comment: ''
}
handleChange = event => {
this.setState({
comment: event.value
})
}
handleSubmit = event => {
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<h4>Add a comment</h4>
<textarea onChange={this.handleChange} value={this.state.comment} />
<div>
<button>Submit Comment</button>
</div>
</form>
)
}
}
export default CommentBox;
CommentBox.text.js
import React from 'react';
import { mount } from 'enzyme';
import CommentBox from 'components/CommentBox';
let wrapped;
beforeEach(() => {
wrapped = mount(<CommentBox />);
})
afterEach(() => {
wrapped.unmount();
})
it('has a textarea and a button', () => {
expect(wrapped.find('textarea').length).toEqual(1);
expect(wrapped.find('button').length).toEqual(1);
});
it('has a text area that users can type in', () => {
wrapped.find('textarea').simulate('change', {
target: {
value: 'new comment'
}
});
wrapped.update();
expect(wrapped.find('textarea').prop('value')).toEqual('new comment');
});
I expect the output of new comment, but the actual is returned undefined
handleChange = event => {
this.setState({
comment: event.target.value
})
}
first do this changes ,its wrong way to set value in comment variable
Please try with below along-with function implementation as suggested by Kishan Jaiswal:
class CommentBox extends React.Component {
constructor(props) {
super(props);
this.state={
comment: ''
}
}
}
I am trying to do a complete istanbul coverage test with jest. At this moment I have a component almost all tested but there is a handleSubmit function where I make a dispatch receiving form event data and when I run the test it tells me
TypeError: Cannot read property 'value' of undefined
10 | payload: {
11 | name: name.value,
> 12 | item: item.value,
| ^
13 | status: status.value }
14 | })
15 | }
I am loading a mockstore, mounted all the component, its all tested but the submit still fails. My test function is as simple as:
it('testing submit', () => {
const form = component.find(`[data-test="submit"]`).first()
form.simulate('submit')
... and continues expecting some existences, but there aren't problems there
I already tried this: enzyme simulate submit form, Cannot read property 'value' of undefined
And tried to parse the event values in the simulate action...
The complete module code is...
class Filters extends Component {
handleSubmit = event => {
event.preventDefault()
const {name, items, status} = event.target;
this.props.dispatch({
type: 'SEARCH_PLAYER',
payload: {
name: name.value,
item: item.value,
status: status.value }
})
}
render() {
return(
<div>
<form onSubmit={this.handleSubmit} data-test="submit">
<div className="form-group col-md-12 text-center"> ...
Another really crazy thing is that my test recognize the "event.target.name.value" and not the items and status. In fact if i delete items and status from the dispatch the test runs successfully.
Looks like you are using item on line 12, but extracting items from the event.target.
The way you chose to handle values is a bit strange. Instead, handle values through state like so: Controlled Components
Then you can test that this.props.dispatch() was called with the correct values.
Side note: Avoid using data attributes when unnecessary, as they'll start to clog up your DOM with superfluous attributes. You have plenty of options to find by element, element.className, className, ...and so on.
Working example: https://codesandbox.io/s/5j4474rkk (you can run the test defined below by clicking on the Tests tab at the bottom left of the screen.
components/Form/Form.js
import React, { Component } from "react";
import PropTypes from "prop-types";
export default class Form extends Component {
state = {
test: ""
};
static propTypes = {
dispatch: PropTypes.func.isRequired
};
handleChange = ({ target: { name, value } }) => {
this.setState({ [name]: value });
};
handleSubmit = e => {
e.preventDefault();
this.props.dispatch({
type: "SEARCH_PLAYER",
payload: {
test: this.state.test
}
});
};
render = () => (
<form onSubmit={this.handleSubmit} className="form-container">
<h1>Form Testing</h1>
<input
className="uk-input input"
type="text"
name="test"
placeholder="Type something..."
onChange={this.handleChange}
value={this.state.test}
/>
<button type="submit" className="uk-button uk-button-primary submit">
Submit
</button>
</form>
);
}
components/Form/__tests__/Form.js (shallowWrap and checkProps are custom functions that can be found in test/utils/index.js)
import React from "react";
import { shallowWrap, checkProps } from "../../../test/utils";
import Form from "../Form";
const dispatch = jest.fn();
const initialProps = {
dispatch
};
const initialState = {
test: ""
};
const wrapper = shallowWrap(<Form {...initialProps} />, initialState);
describe("Form", () => {
it("renders without errors", () => {
const formComponent = wrapper.find(".form-container");
expect(formComponent).toHaveLength(1);
});
it("does not throw PropType warnings", () => {
checkProps(Form, initialProps);
});
it("submits correct values to dispatch", () => {
const name = "test";
const value = "Hello World!";
const finalValues = {
type: "SEARCH_PLAYER",
payload: {
[name]: value
}
};
wrapper.find("input").simulate("change", { target: { name, value } }); // simulates an input onChange event with supplied: name (event.target.name) and value (event.target.value)
wrapper
.find(".form-container")
.simulate("submit", { preventDefault: () => null }); // simulates a form submission that has a mocked preventDefault (event.preventDefault()) to avoid errors about it being undefined upon form submission
expect(dispatch).toBeCalledWith(finalValues); // expect dispatch to be called with the values defined above
});
});
I'm relatively new to Jest and testing in general. I have a component with an input element:
import * as React from "react";
export interface inputProps{
placeholder: string;
className: string;
value: string;
onSearch: (depID: string) => void;
}
onSearch(event: any){
event.preventDefault();
//the actual onclick event is in another Component
this.props.onSearch(event.target.value.trim());
}
export class InputBox extends React.Component<inputProps, searchState> {
render() {
return (
<input
onChange={this.onSearch} //need to test this
className={this.props.className}
type="text"
value={this.props.value}
placeholder={this.props.placeholder} />
);
}
}
I want a test that checks that input element's onChange is a function that takes in the input element's value attribute as the parameter. This is how far I have gotten so far:
//test to see the input element's onchange
//returns a function that takes its value as a param
it("onChange param is the same value as the input value", () => {
const mockFn = jest.fn();
const input = enzyme.shallow(<InputBox
value="TestVal"
placeholder=""
className=""
onSearch={mockFn}/>);
input.find('input').simulate('change', { preventDefault() {} });
expect(mockFn.mock.calls).toBe("TestVal");
});
I am going off of the first solution here Simulate a button click in Jest
And: https://facebook.github.io/jest/docs/en/mock-functions.html
Edit: Running the above throws the following error:
TypeError: Cannot read property 'value' of undefined
Syntax on your code snippet I think should be:
import React from 'react';
export default class InputBox extends React.Component {
onSearch(event) {
event.preventDefault();
this.props.onSearch(event.target.value.trim());
}
render () { return (<input onChange={this.onSearch.bind(this)} />); }
}
The test is failing because, as same you define the preventDefault function on the event object, you also must define other properties used on the onSearch function.
it('should call onChange prop', () => {
const onSearchMock = jest.fn();
const event = {
preventDefault() {},
target: { value: 'the-value' }
};
const component = enzyme.shallow(<InputBox onSearch={onSearchMock} />);
component.find('input').simulate('change', event);
expect(onSearchMock).toBeCalledWith('the-value');
});
Previous test code needs to define the event shape because you are using shallow rendering. If you want instead to test that the actual input value is being used on your onSearch function you need to try a full render with enzyme.mount:
it('should call onChange prop with input value', () => {
const onSearchMock = jest.fn();
const component = enzyme.mount(<InputBox onSearch={onSearchMock} value="custom value" />);
component.find('input').simulate('change');
expect(onSearchMock).toBeCalledWith('custom value');
});
For those testing using TypeScript (and borrowing from the answers above), you'll need to perform a type coercion (as React.ChangeEvent<HTMLInputElement>) to ensure that the linter can view the signature as being compatible:
React file
export class InputBox extends React.Component<inputProps, searchState> {
onSearch(event: React.ChangeEvent<HTMLInputElement>){
event.preventDefault();
//the actual onclick event is in another Component
this.props.onSearch(event.target.value.trim());
}
render() {
return (
<input
onChange={this.onSearch} //need to test this
className={this.props.className}
type="text"
value={this.props.value}
placeholder={this.props.placeholder} />
);
}
}
Test file
it('should call onChange prop', () => {
const onSearchMock = jest.fn();
const event = {
target: { value: 'the-value' }
} as React.ChangeEvent<HTMLInputElement>;
const component = enzyme.shallow(<InputBox onSearch={onSearchMock} />);
component.find('input').simulate('change', event);
expect(onSearchMock).toBeCalledWith('the-value');
});
or alternatively
it('should call onChange prop', () => {
const onSearchMock = jest.fn();
const event = {
target: { value: 'the-value' }
} as React.ChangeEvent<HTMLInputElement>;
const component = enzyme.mount<InputBox>(<InputBox onSearch={onSearchMock} />);
const instance = component.instance();
instance.onSearch(event);
expect(onSearchMock).toBeCalledWith('the-value');
});
I figured out the solution.
So, instead of passing in the value inside InputBox, we have to pass it inside the second param of simulate as shown below. Then we simply check for equality against the first arg of the first call to the mockFn. Also, we can get rid of the event.preventDefault();
it("onChange param is the same value as the input element's value property", () => {
const mockFn = jest.fn();
const input = enzyme.shallow(<InputBox
value=""
placeholder=""
className=""
onSearch={mockFn}/>);
input.find('input').simulate('change', {target: {value: 'matched'} });
expect(mockFn.mock.calls[0][0]).toBe('matched');
});
How about this one? I simulate the change event using enzyme and perform a snapshot test.
Component
import React, { FunctionComponent, useState } from 'react';
const Index: FunctionComponent = () => {
const [val, setVal] = useState('');
const onInputChange = e => {
e.preventDefault();
setVal(e.target.value);
};
return (
<input type='text' onChange={onInputChange} value={val} />
);
};
export default Index;
Unit Test
describe('Index with enzyme', () => {
it('Should set value to state when input is changed', () => {
const container = shallow(<Index />);
const input = container.find('input');
input.simulate('change', { preventDefault: jest.fn, target: { value: "foo" } });
expect(container).toMatchSnapshot();
});
});
Snapshot
exports[`Index with enzyme Should set value to state when input is changed 1`] = `
<input
onChange={[Function]}
type="text"
value="foo"
/>
`;
I struggled with this for hours. Plus since I had multiple select fields on one page. What I found is that Textfield solution works differently from Select.test given on docs.
On the code I defined SelectProps with id. (You can also go with data-testid)
I could only trigger dropdown by clicking this field.
<TextField
select
variant = "outlined"
value = { input.value || Number(0) }
onChange = { value => input.onChange(value) }
error = { Boolean(meta.touched && meta.error) }
open = { open }
SelectProps = {
{
id: `${input.name}-select`,
MenuProps: {
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
getContentAnchorEl: null
}
}
}
{ ...props} >
//yourOptions Goes here
</TextField>
And in my test.
const pickUpAddress = document.getElementById("address-select");
UserEvent.click(pickUpAddress);
UserEvent.click(screen.getByTestId("address-select-option-0"));
Worked like a charm afterwards. Hope this helps.
If you're writing lwc (salesforce) jest tests you can simulate this by selecting the input and dispatching an event.
const changeEvent = new CustomEvent('change', {
detail: {
'value': 'bad name'
}
});
element.shadowRoot.querySelector('lightning-input').dispatchEvent(changeEvent);