Тестирование реакционной-финальной формы с использованием библиотеки реактивного тестирования

Question

Я пытаюсь использовать реагирующую на тестирование библиотеку для проверки реагирующей окончательной формы. Работает с click-в случае, как изменение флажка, но я не могу заставить его работать change-События.

Ниже приведен пример использования jest в качестве тестового бегуна:

TestForm.js:

import React from 'react';
import { Form, Field } from 'react-final-form';

const TestForm = () => (
  <Form
    initialValues={{ testInput: 'initial value', testCheckbox: false }}
    onSubmit={() => null}
    render={({ values, initialValues }) => (
      <>
        {console.log('VALUES', values)}
        <label>
          Checkbox label
          <Field name="testCheckbox" component="input" type="checkbox"/>
        </label>
        <Field name="testInput" component="input" placeholder="placeholder" />
        {values.testCheckbox !== initialValues.testCheckbox && <div>Checkbox has changed</div>}
        {values.testInput !== initialValues.testInput && <div>Input has changed</div>}
      </>
    )}
  />
);

export default TestForm;

test.js:

import React from 'react';
import { cleanup, fireEvent, render, waitForElement } from 'react-testing-library';

import TestForm from './TestForm';

afterEach(cleanup);

describe('TestForm', () => {
  it('Change checkbox', async () => {
    const { getByLabelText, getByText } = render(<TestForm />);
    const checkboxNode = getByLabelText('Checkbox label');
    fireEvent.click(checkboxNode);
    await waitForElement(() => getByText('Checkbox has changed'));
  });
  it('Change input', async () => {
    const { getByPlaceholderText, getByText } = render(<TestForm />);
    const inputNode = getByPlaceholderText('placeholder');
    fireEvent.change(inputNode, { target: { value: 'new value' } });
    await waitForElement(() => getByText('Input has changed'));
  });
});

Я запускаю это, используя npx jest test.js и первый тест проходит, но не второй.

Важная часть, которая, кажется, не работает

fireEvent.change(inputNode, { target: { value: 'new value' } });

Какие-либо предложения?

Answer 1

Я считаю, что подпадает под визуальное / пользовательское тестирование. Когда дело доходит до визуального тестирования, вы должны использовать Applitools. Я использую инструмент в течение некоторого времени. Они интегрируются со многими фреймворками, и все их SDK предоставляют интуитивно понятный API для интеграции Applitools. Даже иногда интеграция происходит без проблем, например, в случае сборника рассказов.

Недавно они выпустили новый инструмент, анализ корневых причин (RCA). Этот инструмент помогает вам обнаружить визуальные различия и точно сказать, что вызывает разницу с точки зрения изменений DOM или CSS изменений. Таким образом, вам не нужно тратить свое время, пытаясь выяснить, что пошло не так, вы сосредоточены только на устранении проблемы. Действительно мощные инструменты для разработчиков.

Попробуйте!