Как я могу использовать Jest для юнит-тестирования карри обработчика событий в React? - PullRequest
Новая
       8

Как я могу использовать Jest для юнит-тестирования карри обработчика событий в React?

0 голосов
/ 08 апреля 2020

Мне кажется, что ни одна инфраструктура модульного тестирования не может считаться завершенной без возможности тестирования такого общего требования, как тестирование каррированных обработчиков событий. Шутка не должна быть исключением. Я искал "далеко и широко" и все еще с пустыми руками.

Вот мой компонент: 

    import { Card, CardContent } from '@material-ui/core';
    import TextInput from 'core/formElements/TextInput';

    import styles from './ReturnEmailForm.module.scss';

    export const ReturnEmailForm = ({ onChange, currSubEmail, emailMessage }) => (
      <Card className={styles.root}>
        <CardContent>
          <form className={styles.form} data-validate-wrapper>
            <TextInput
              type="email"
              value={currSubEmail || ''}
              handleChange={onChange('currSubEmail')}
            />
            <TextInput
              type="text"
              name="message"
              multiline={true}
              value={emailMessage || ''}
              handleChange={onChange('emailMessage')}
            />
          </form>
        </CardContent>
      </Card>
    );

    export default ReturnEmailForm;

И моя попытка юнит-тестирования: 

import React from 'react';
import { shallow } from 'enzyme';

import TextInput from 'core/formElements/TextInput';
import { ReturnEmailForm } from './ReturnEmailForm';

const mockOperation = {
  change: jest.fn(),
};
const mockedHandleChange = jest.fn(() => mockOperation.change);
const props = {
  onChange: mockedHandleChange,
};

describe('ReturnEmailForm', () => {
  let wrapper;

  beforeAll(() => {
    wrapper = shallow(<ReturnEmailForm {...props} />);
  });

  test('Inputs work correctly', () => {
    expect(mockedHandleChange).toBeCalledWith('currSubEmail');
    expect(mockedHandleChange).toBeCalledWith('emailMessage');

    const textInputs = wrapper.find(TextInput);
    const text1 = textInputs.first();
    expect(text1).toBeDefined();
    const text2 = textInputs.last();
    expect(text2).toBeDefined();

    const event = {
      preventDefault() {},
      target: { value: 'the value' },
    };

    text1.simulate('change', event);
    expect(mockOperation.change).toBeCalledWith('the value');
    text2.simulate('change', event);
    expect(mockOperation.change).toBeCalledWith('the value');
  });
});

Это не работает Я надеюсь, что это просто то, что я делаю неправильно.

...