Question

我正在尝试使用react-testing-library测试react-final-form。它可以与click事件一起使用，就像更改复选框一样，但我无法使其与change事件一起使用。

下面是一个使用笑话作为测试跑步者的示例：

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' } });

有什么建议吗？

使用反应测试库测试反应最终形式

0 个答案: