Модульное тестирование компонента Formik с шуткой / энзимом - PullRequest
Новая
       28

Модульное тестирование компонента Formik с шуткой / энзимом

0 голосов
/ 27 сентября 2018

Я собрал довольно простую контактную форму, которая прекрасно работает.Однако теперь мне нужно начать писать свои модульные тесты, и я столкнулся с множеством проблем (как будто мне буквально удалось только пройти тест моментального снимка, чтобы пройти).

Итак, чтобы начать с I 'Я пытаюсь проверить, что форма должна отображать мои сообщения проверки, когда вы нажимаете кнопку отправки, если вы не заполнили все необходимые разделы.

Я думал, что смогу добиться этого, вызвав функцию handleSubmit(), например:componentRender.find('Formik').instance().props.handleSubmit(badFormValues, { resetForm });

Однако, когда я запускаю componentRender.debug(), мои сообщения проверки не отображаются.Это как функция validationSchema не вызывается?

Нужно ли что-то особенное сделать?Я чувствую, что функция mapPropsToValues() работает, глядя на объект состояния, он заполняется значениями, которые я передаю форме.Я просто не могу понять, почему валидация, по-видимому, пропускается?

Я занимаюсь этим уже 2 дня и не могу найти хороших примеров в Google (возможно, по моей вине), поэтому любая помощь будет огромнойпризнателен.

Для справки вот тестовый файл: 

import React from 'react';
import { shallow, mount } from 'enzyme';
import { BrowserRouter as Router } from 'react-router-dom';
import PartnerRegistrationForm from 'Components/partner-registration-form/PartnerRegistrationForm';

describe('PartnerRegistrationForm component', () => {
    const formValues = {
        companyName: 'some company',
        countryCode: 'GB +44',
        telNumber: 12345678,
        selectCountry: 'United Kingdom',
        postcode: 'ABC1 234',
        addressSelect: '123 street',
        siteName: 'blah',
        siteURL: 'https://www.blah.com',
        contactName: 'Me',
        email: 'me@me.com',
    };

    const componentShallow = shallow(<PartnerRegistrationForm {...formValues} />);

    describe('Component Snapshot', () => {
        it('should match stored snapshot', () => {
            expect(componentShallow).toMatchSnapshot();
        });
    });

    describe('Component functionality', () => {
        it('should not submit if required fields are empty', () => {
            const badFormValues = {
                companyName: 'some company',
                countryCode: 'GB +44',
                telNumber: 12345678,
            };
            const resetForm = jest.fn();
            const componentRender = mount(
                <Router>
                    <PartnerRegistrationForm {...badFormValues} />
                </Router>,
            );
            componentRender.find('Formik').instance().props.handleSubmit(badFormValues, { resetForm });
            // console.log(componentRender.update().find('.validation-error'));
            // console.log(componentRender.find('Formik').instance());
            // expect(componentRender.find('.validation-error').text()).toEqual('Company Name is required');
        });
    });
});

А вот моя withFormik() функция: 

const WrappedFormWithFormik = withFormik({
    mapPropsToValues({
        companyName,
        countryCode,
        telNumber,
        selectCountry,
        postcode,
        addressSelect,
        siteName,
        siteURL,
        contactName,
        email,
    }) {
        return {
            companyName: companyName || '',
            countryCode: countryCode || '',
            telNumber: telNumber || '',
            selectCountry: selectCountry || '',
            postcode: postcode || '',
            addressSelect: addressSelect || '',
            siteName: siteName || '',
            siteURL: siteURL || '',
            contactName: contactName || '',
            email: email || '',
        };
    },
    validationSchema, // This is a standard Yup.object(), just importing it from a separate file
    handleSubmit: (values, { resetForm }) => {
        console.log('submitting');
        const {
            companyName,
            countryCode,
            telNumber,
            selectCountry,
            postcode,
            addressSelect,
            siteName,
            siteURL,
            contactName,
            email,
        } = values;

        const emailBody = `Name: ${contactName},`
        + `Email: ${email},`
        + `Company Name: ${companyName},`
        + `Country Code: ${countryCode},`
        + `Telephone Number: ${telNumber},`
        + `Country: ${selectCountry},`
        + `Postcode: ${postcode},`
        + `Address: ${addressSelect},`
        + `Website Name: ${siteName},`
        + `Website URL: ${siteURL}`;

        // TODO set up actual contact submit logic
        window.location.href = `mailto:test@test.com?subject=New partner request&body=${emailBody}`;
        resetForm();
    },
})(PartnerRegistrationForm);

1 Ответ

0 голосов
/ 15 октября 2018

Это может не сработать, если вы пытаетесь отправить форму, нажав на кнопку с type="submit"

Я нашел единственный способ получить ее для отправки (и, таким образом, запустить проверки) -смоделируйте его напрямую: 

const form = wrapper.find('form');
form.simulate('submit', { preventDefault: () => {} });

... и, кроме того, вам может понадобиться что-то вроде следующего для обновления оболочки после асинхронной проверки formik и изменений состояния: 

setTimeout(() => {
  wrapper.update();
}, 0);

Don 'не забудьте использовать done() или ожидайте асинхронного ожидания, чтобы тест не завершился досрочно.

...