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:
xxxxxxxxxx1
import React, { useState } from 'react';2
import { Text} from 'rebass';3
import { Label, Checkbox } from '@rebass/forms';4
// some code here...5
6
const RegisterForm = () => {7
const [agreement, setAgreement] = useState(false);8
9
// some code here...10
11
return (12
// some code here...13
<Label>14
<Checkbox15
name="agreement"16
checked={agreement}17
onChange={e => setAgreement(e.target.checked)}18
/>19
I have read and agreed20
</Label>21
{!agreement && <Text id="message">Agreement was not given!</Text>}22
// some code here...23
);24
};25
26
export default RegisterForm;Test:
xxxxxxxxxx1
import React from 'react';2
import RegisterForm from '../registerForm';3
import { render, act, fireEvent } from '@testing-library/react';4
5
test('Agreement test', () => {6
const register = render(<RegisterForm />);7
8
const input = register.querySelector<HTMLInputElement>('[name="agreement"]');9
act(() => {10
fireEvent.change(input!, { target: { checked: true } });11
});12
13
const message = register.querySelector<HTMLElement>('[id="message"]');14
expect(message).toBeNull();15
}); 1 answer
4 points
Try to use fireEvent.click(...) instead of fireEvent.change(...).
Example:
xxxxxxxxxx1
import React from 'react';2
import RegisterForm from '../registerForm';3
import { render, act, fireEvent } from '@testing-library/react';4
5
test('Agreement test', () => {6
const register = render(<RegisterForm />);7
8
const input = register.querySelector<HTMLInputElement>('[name="agreement"]');9
act(() => {10
// fix:11
fireEvent.click(input!, { target: { checked: true } });12
});13
14
const message = register.querySelector<HTMLElement>('[id="message"]');15
expect(message).toBeNull();16
});1 commentsShow commentsAdd comment
4y
I found dome discussion about the problem: https://github.com/testing-library/react-testing-library/issues/156
