React Testing Library

"The more your tests resemble the way your software is used, the more confidence they can give you."

RTL docs

Some things are different 🥁🥁🥁🥁🥁

What do users interact with?

DOM

What should our tests interact with?

DOM

Render or do not...

...there is no "shallow."

        import { render } from '@testing-library/react';
      
        render(
          <I18nProvider>
            <GroupPreview {...defaultProps} />
          </I18nProvider>
        );
      

But you can still mock 🙈

        jest.mock('@elastic/eui', () => ({
          ...jest.requireActual('@elastic/eui'),
          useResizeObserver: jest.fn(),
        }));
      

But... most of the time you shouldn't 😅

"The more your tests resemble the way your software is used, the more confidence they can give you."

RTL docs

No more access to sub props.

In a past life...

        component.find(DatePickerComponent).prop(‘onDateChange’)(newDate);
      

The bright future 🌅

        userEvent.click(screen.getByRole('link', { name: 'Last five minutes' }));
      

The bright future 🌅

        userEvent.click(screen.getByRole('link', { name: 'Last five minutes' }));
      

The bright future 🌅

        userEvent.click(screen.getByRole('link', { name: 'Last five minutes' }));
      

The bright future 🌅

        userEvent.click(screen.getByRole('link', { name: 'Last five minutes' }));
      

Asynchronous stuff

Asynchronous stuff: Enzyme

        await wrapper
          .find(`.kbnFieldButton__button`)
          .simulate('click');
        
        expect(something).toHaveBeenCalledWith(something expected);
      

FAIL

🤔

        await act(async () => {
          await wrapper
          .find(`.kbnFieldButton__button`)
          .simulate('click');
        });
        
        expect(something).toHaveBeenCalledWith(something expected);
      

FAIL

🧐

        await act(async () => {
          await wrapper
          .find(`.kbnFieldButton__button`)
          .simulate('click');
        });
        
        wrapper.update();
        
        expect(something).toHaveBeenCalledWith(something expected);
      

FAIL

😠

        await act(async () => {
          await wrapper
          .find(`.kbnFieldButton__button`)
          .simulate('click');
        });
        
        wrapper.update();
        await new Promise(resolve => setTimeout(resolve, 0));
        
        expect(something).toHaveBeenCalledWith(something expected);
      

FAIL

😡

        
        jest.mock('lodash', () => {
          const original = jest.requireActual('lodash');

          return {
            ...original,
            debounce: (fn: unknown) => fn,
          };
        });
        
      
        ...
      
        await act(async () => {
          await wrapper
          .find(`.kbnFieldButton__button`)
          .simulate('click');
        });
        
        wrapper.update();
        await new Promise(resolve => setTimeout(resolve, 0));
        
        expect(something).toHaveBeenCalledWith(something expected);
      

PASS

😅

🤨 Does this test actually mean anything?

Asynchronous stuff: RTL

        userEvent.click(screen.getByRole('link', { name: 'Last five minutes' }));
      
        expect(something).toHaveBeenCalledWith(something expected);
      

FAIL

🙂

        import { ... waitFor } from '@testing-library/react';
      
        ...
      
        userEvent.click(screen.getByRole('link', { name: 'Last five minutes' }));
      
        await waitFor(() => {
          expect(something).toHaveBeenCalledWith(something expected);
        });
      

PASS

😎

Accessing DOM elements

3 core operations

• get — throws if not found
• query — returns empty if not found
• find — like get + waitFor

Singular (strict)

• getBy...
• queryBy...
• findBy...

Plural

• getAllBy...
• queryAllBy...
• findAllBy...

Good

• getByTestId

Better

• getByAltText
• getByTitle

Best!

• getByRole
• getByLabelText
• getByPlaceholderText
• getByText
• getByDisplayValue

Interacting with the DOM

        import { ..., screen, fireEvent } from '@testing-library/react';
      
        fireEvent.click(await screen.findByText(label));
      

        elem.dispatchEvent(event);
      

"The more your tests resemble the way your software is used, the more confidence they can give you."

RTL docs

RTL 🤗 user-event

        import { ..., screen } from '@testing-library/react';
        import userEvent from '@testing-library/user-event';
      
        userEvent.click(await screen.findByText(label));
      

RTL 🤗 jest-dom

        expect(screen.getByTestId('button')).toBeDisabled();
        expect(screen.queryByRole('combo-box')).not.toBeInTheDocument();
      

RTL Resources

• General RTL docs
• Query docs
• Jest DOM

Up next in testing

• Update RTL dependencies ⬆️
• Adoption tracking/team pulse
• Team testing strategy document
• Other ideas from the team 💡