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

Я пытаюсь использовать реагирующее-тестирование-библиотеку для проверки реагирующее окончательное-форму .Он работает с 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' } });

Есть предложения?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...