Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unit testing using react-testing-library #1554

Closed
archansel opened this issue May 27, 2019 · 2 comments
Closed

Unit testing using react-testing-library #1554

archansel opened this issue May 27, 2019 · 2 comments

Comments

@archansel
Copy link

@archansel archansel commented May 27, 2019

Hi, I tried to test my form submission using react-testing-library but cannot find a way to make it submitting the form

<Formik
    initialValues={{ email: '', phone: '', firstName: '', lastName: '' }}
    validationSchema={validationSchema}
    onSubmit={handleSubmit}
    render={({ isSubmitting }) => (
        <Form className="form">
            <EmailField
                className="form__input form__input__email"
                label="Email"
                sublabel="Tickets will be sent to this email"
                placeholder="Your email address"
                name="email"
                disabled={isSubmitting}
                required
            />
            <PhoneField
                className="form__input form__input__phone"
                label="Phone Number"
                placeholder="0811-2345-66788"
                name="phone"
                disabled={isSubmitting}
                required
            />
            <TextField
                className="form__input form__input__first-name"
                label="First Name"
                placeholder="First name"
                name="firstName"
                disabled={isSubmitting}
                required
            />
            <TextField
                className="form__input form__input__last-name"
                label="Last Name"
                placeholder="Last name"
                name="lastName"
                disabled={isSubmitting}
                required
            />
            <Button className="form__navigation__continue" type="submit" variant="success" loading={isSubmitting}>
                Continue
            </Button>
        </Form>
    )}
/>

This is my test case

it('should navigate when submit button clicked', () => {
    const mockOnSessionChange = jest.fn();
    const mockOnNavigate = jest.fn();
    const { container } = renderComponent({ onSessionChange: mockOnSessionChange, onNavigate: mockOnNavigate });
    const emailInput = container.querySelector('input[name="email"]');
    const phoneInput = container.querySelector('input[name="phone"]');
    const firstNameInput = container.querySelector('input[name="firstName"]');
    const lastNameInput = container.querySelector('input[name="lastName"]');
    const submitButton = container.querySelector('button[type="submit"]');

    fireEvent.change(emailInput, { persist: jest.fn(), target: { value: 'email@example.com' } });
    fireEvent.change(phoneInput, { persist: jest.fn(), target: { value: '0811234566788' } });
    fireEvent.change(firstNameInput, { persist: jest.fn(), target: { value: 'First Name' } });
    fireEvent.change(lastNameInput, { persist: jest.fn(), target: { value: 'Last Name' } });
    fireEvent.click(submitButton);

    expect(mockOnSessionChange).toHaveBeenCalledWith(session);
    expect(mockOnNavigate).toHaveBeenCalledWith(`/orders/${order.number}/${session}`);
});

handleSubmit was never called so the form never submitting. How to make it work with react-testing-library? did I miss something?

@julionav

This comment has been minimized.

Copy link

@julionav julionav commented May 28, 2019

You might be facing the following issues:

  • The form isn't validating correctly, so the submit handler is never called
  • The form is validating correctly but, the handler hasn't been called yet. You can use the wait helper to wrap your first expect to see if this is the issue. If this is the issue, you can wrap the things that make the state change (the events) with the act helper to make sure the state is updated
// Remember to make your test async
await wait () => expect(mockOnSessionChange).toHaveBeenCalledWith(session);
@archansel

This comment has been minimized.

Copy link
Author

@archansel archansel commented May 29, 2019

Yup, it seems yup validation not sync so I have to wait for it to kick in. Closing the issue

@archansel archansel closed this May 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.