<TextField
id='firstNameInput'
onChange={handleChange}
value={newUser.firstName}
variant='outlined'
required
fullWidth
label='First Name'
name='firstName'
/>
This is the component I am trying to test.
const handleChange = (e) => {
const { name, value } = e.target;
setNewUser((prevValue) => {
return {
...prevValue,
[name]: value,
};
});
};
This is the function that onChange fires, which changes the newUser state, which is just an object of 5 properties, all of which are strings.
it('Test register form first name input field', () => {
const component = mount(<RegisterForm />);
const wrapper = component.find(TextField).at(0);
const event = {
target: { name: 'firstName', value: 'test' },
};
expect(wrapper.props().label).toBe('First Name');
expect(wrapper.props().value).toBe('');
wrapper.simulate('change', event);
wrapper.update();
expect(wrapper.props().value).toBe('test');
});
This unit test is very basic obviously, I'm just trying to get off the ground with unit testing, but it doesn't seem to matter how many SO questions, Medium articles, etc. I read but I just can't get it to work.
I am aware that the wrapper needs to be updated, so I've taken care of that, simulate is being passed the appropriate event, I'm accessing the props to get at the label and value. The first two expect assertions pass, so it's finding the component and testing its initial value just fine, but the value is still an empty string after I fire change and it should be "test".
I know the form is working just fine, I have tested it manually, so the issue is strictly with the unit test. Any idea why the value is not being updated? Apologies if this is a basic question...trying to get the hang of unit testing with React.