Languages

React - onChange nie działa dla pola wyboru z fireEvent w @testing-library / respond

0 points
Asked by:
Lani-Skinner
408

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
Answered by:
Lani-Skinner
408

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
Dirask Community
Tutaj znalazłem dyskusję na temat problemu: https://github.com/testing-library/react-testing-library/issues/156
Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join