mardi 20 novembre 2018

Testing react-final-form using react-testing-library

I'm trying to use react-testing-library to test react-final-form. This works fine with click-events, like changing a checkbox, but I can't get it working with change-events.

Below is an example using jest as a test runner:

TestForm.js:

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

const TestForm = () => (
  <Form
    initialValues=
    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'));
  });
});

I run this using npx jest test.js and the first test passes but not the second.

The crucial part that doesn't seem to work is

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

Any ideas?

Aucun commentaire:

Enregistrer un commentaire