React Testing Library guidance?

1

Hey guys, having a bit of trouble just making sure to test that a form exists and I have no idea why it is failing. I am receiving the error:

    TypeError: Cannot destructure property `open` of 'undefined' or 'null'.

      12 | 
      13 | const EventSignUpForm: React.FC = () => {
    > 14 |   const {
         |         ^
      15 |     open,
      16 |     severity,
      17 |     message,

The beginning of the component that it complains about is on a context that I didn’t think I need to pass in through the test?:

const EventSignUpForm: React.FC = () => {
  const {
    open,
    severity,
    message,
    setOpen,
    setSeverity,
    setMessage,
  } = useContext(SnackbarContext);

  const [values, handleChange, reset] = useFormFields({
    firstName: '',
    lastName: '',
    email: '',
    company: '',
    role: '',
  });

EDIT: Oy sorry forgot the actual test:

import React from 'react';
import { render, screen } from '@testing-library/react';
import EventSignUpForm from './EventSignUpForm';

describe('event signup form', () => {
  it('renders a form', () => {
    render(<EventSignUpForm />);

    const signUpForm = screen.getByTestId('event-form');
    expect(signUpForm).toBeInTheDocument();
  });
});

If anyone has experience in React Testing Library, I’m all ears.

1 Like
2

Turns out this works now. I had to wrap the context it was complaining about and pass in the initial value:

import React from 'react';
import { render } from '@testing-library/react';
import EventSignUpForm from './EventSignUpForm';
import { SnackbarContext } from '../../context/SnackBarContext';

describe('event signup form', () => {
  it('renders a form', () => {
    const { debug, getByRole } = render(
      <SnackbarContext.Provider value={false}>
        <EventSignUpForm />
      </SnackbarContext.Provider>
    );

    const signUpForm = getByRole('form');
    expect(signUpForm).toBeInTheDocument();
    debug();
  });
});