EN
React - onChange nie działa dla pola wyboru z fireEvent w @testing-library / respond
1
answers
0
points
Piszę testy dla mojej aplikacji React i mam następujący problem. Moje pole wyboru nie zmienia stanu właściwości checked
, gdy uruchamiam metodę fireEvent.change(input!, {target: {checked: true}})
. Korzystam z biblioteki rebass. Poniżej załączam więcej szczegółów.
komponent React:
import React, { useState } from 'react';
import { Text} from 'rebass';
import { Label, Checkbox } from '@rebass/forms';
// jakiś kod...
const RegisterForm = () => {
const [agreement, setAgreement] = useState(false);
// jakiś kod...
return (
// jakiś kod...
<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>}
// jakiś kod...
);
};
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
0
points
Rozwiązaniem było użycie fireEvent.click(...)
zamiast fireEvent.change(...)
.
Przykład:
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(() => {
// naprawione:
fireEvent.click(input!, { target: { checked: true } });
});
const message = register.querySelector<HTMLElement>('[id="message"]');
expect(message).toBeNull();
});
1 comments
Add comment
Tutaj znalazłem dyskusję na temat problemu: https://github.com/testing-library/react-testing-library/issues/156