EN
React - onChange event doesn't work for checkbox with fireEvent in @testing-library/react
1
answers
1
points
I am writing tests for my React application and I got some problem. My checkbox does not change checked
property state when I fire fireEvent.change(input!, {target: {checked: true}})
method. I use rebass library. Below I attach more details.
React component:
import React, { useState } from 'react';
import { Text} from 'rebass';
import { Label, Checkbox } from '@rebass/forms';
// some code here...
const RegisterForm = () => {
const [agreement, setAgreement] = useState(false);
// some code here...
return (
// some code here...
<Label>
<Checkbox
name="agreement"
checked={agreement}
onChange={e => setAgreement(e.target.checked)}
/>
I have read and agreed...
</Label>
{!agreement && <Text id="message">Agreement was not given!</Text>}
// some code here...
);
};
export default RegisterForm;
Test:
import React from 'react';
import RegisterForm from '../registerForm';
import { render, act, fireEvent } from '@testing-library/react';
test('Agreement test', () => {
const register = render(<RegisterForm />);
const input = register.querySelector<HTMLInputElement>('[name="agreement"]');
act(() => {
fireEvent.change(input!, { target: { checked: true } });
});
const message = register.querySelector<HTMLElement>('[id="message"]');
expect(message).toBeNull();
});
1 answer
4
points
Try to use fireEvent.click(...)
instead of fireEvent.change(...)
.
Example:
import React from 'react';
import RegisterForm from '../registerForm';
import { render, act, fireEvent } from '@testing-library/react';
test('Agreement test', () => {
const register = render(<RegisterForm />);
const input = register.querySelector<HTMLInputElement>('[name="agreement"]');
act(() => {
// fix:
fireEvent.click(input!, { target: { checked: true } });
});
const message = register.querySelector<HTMLElement>('[id="message"]');
expect(message).toBeNull();
});
1 comments
Add comment
I found dome discussion about the problem: https://github.com/testing-library/react-testing-library/issues/156