Languages

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

0 points
Asked by:
Dirask Community
5850

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:
Dirask Community
5850

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