Как определить тип для отправки формы? (ожидая, что ObjectContained вместо этого получает SyntheticEvent) - PullRequest
Новая
       19

Как определить тип для отправки формы? (ожидая, что ObjectContained вместо этого получает SyntheticEvent)

0 голосов
/ 18 июня 2019

Использование машинописи, реагирования, шутки и библиотеки реагирования-тестирования .

Используется следующий код:

Form.tsx 

export interface IFormProps {
  handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
}

const Form: React.FC<IFormProps> = (props: IFormProps) => {
  return (
    <form onSubmit={props.handleSubmit}>
      <FormControl>
        <Input name="myInput" data-testid="myInputId" />
      </FormControl>
      <Button type="submit" data-testid="mySubmitButton">Submit form</Button>
    </form>
  )
};

Page.tsx 

class Page extends React.Component {
  //...
  public handleSubmit = <T extends React.FormEvent>(event: T) => {
    event.preventDefault();
    // do stuff with it
  }
  //...
}

form.test.tsx 

it('submits the form data ', () => {
  const handleSubmit = jest.fn();

  const { getByTestId } = render(<Form handleSubmit={handleSubmit} />);

  const input = getByTestId('myInputId') as HTMLInputElement;
  const submitButton = getByTestId('mySubmitButton') as HTMLButtonElement;

  fireEvent.change(input, {
      target: { value: 'some test value' }
    });

  // API: fireEvent(node: HTMLElement, event: Event)
  fireEvent.click(submitButton);

  expect(handleSubmit).toHaveBeenCalledTimes(1);

  /* 
   * the following outputs the failed test output below 
   */
  expect(handleSubmit).toHaveBeenCalledWith(
    expect.objectContaining({
      "value": "some test value",
    })
  );
}

Вывод: 

    - Expected
    + Received

    - ObjectContaining {
    -   "value": "some test value",
    + SyntheticEvent {
    +   "_dispatchInstances": null,
    +   "_dispatchListeners": null,
    +   "_targetInst": null,
    +   "bubbles": null,
    // ...etc.

Попробовал шаги в этом блоге: https://medium.com/@evanteague/creating-fake-test-events-with-typescript-jest-778018379d1e

Однако они слишком специфичны для этого варианта использования.Попытка воспроизвести его, следуя инструкциям, также пока не работает.

Как определить тип для этой тестовой функции?

...