Проверьте реагирующий компонент с помощью библиотеки test и response-testing-library

Question

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

import React, { useEffect, useState } from 'react';
import { compose } from 'recompose';
import { connect } from 'react-redux';

import { clearAll, fetchContacts } from '~/store/resources/contacts/actions';
import { isDevEnv } from '~/utils';

import Sidebar from './Sidebar';
import Table from './Table';
import Toolbar from './Toolbar';

const Contacts = ({ clearAll, fetchContacts, ...props }) => {
  const [searchValue, setSearchValue] = useState('');
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [canonicalFormValues, setCanonicalFormValues] = useState({ active: true });

  useEffect(() => {
    fetchContacts();
    return () => {
      clearAll();
    };
  }, []);

  const closeSidebar = () => {
    if (isDevEnv) {
      console.log('hit close function');
    }
    setIsSidebarOpen(false);
  };

  return (
    <div>
      <Toolbar
        searchValue={searchValue}
        setSearchValue={setSearchValue}
        setIsSidebarOpen={setIsSidebarOpen}
      />
      <Table setCanonicalFormValues={setCanonicalFormValues} />
      <Sidebar
        isSidebarOpen={isSidebarOpen}
        closeSidebar={closeSidebar}
        canonicalFormValues={canonicalFormValues}
      />
      {isDevEnv && (
        <div>
          This is coming from the contact folder
          <br />
          state values:
          <br />
          {JSON.stringify({ searchValue })}
          <br />
          {JSON.stringify({ isSidebarOpen })}
          <br />
          {JSON.stringify({ canonicalFormValues })}
        </div>
      )}
    </div>
  );
};

const mapDispatchToProps = {
  clearAll,
  fetchContacts,
};

export default compose(
  connect(
    null,
    mapDispatchToProps,
  ),
)(Contacts);

Answer 1

Обычно я начинаю с простого теста «следует визуализировать без сбоев». Я предпочитаю экспортировать и тестировать неокрашенный компонент, в вашем случае Contacts.

export const Contacts = ({ clearAll, fetchContacts, ...props }) => { ...

В тестовом файле

import React from 'react';
import { render } from '@testing-library/react';
import { Contacts } from '.';

// mock the other imported components, they should already be tested alone, right?
jest.mock('./Sidebar');
jest.mock('./Table');
jest.mock('./Toolbar');

describe('Contacts', () => {
  it('should render without crashing', () = {
    render(
      <Contacts
        // pass all the props necessary for a basic render
        clearAll={jest.fn()}
        fetchContacts={jest.fn()}
      />
    );
  });
});

На этом этапе я запускаю отчет о покрытии кода, чтобы увидеть сколько у меня есть, затем добавьте больше тестов с различными значениями пропа и / или используя средства сопоставления реагирующей-тестирующей библиотеки, чтобы целевые кнопки или элементы, чтобы утверждать, что текст видим, или вызывать обратные вызовы, и т. д. c, пока у меня не будет покрытия, которое я хочу .

Иногда некоторые из ваших компонентов могут полагаться на поставщика контекста, и в этом случае RTL позволяет вам указывать оболочки. Например, если ваш компонент украшен react-intl для локализации строк, вы можете предоставить оболочку.

export const Contacts = ({ clearAll, fetchContacts, intl }) => { ...

...

export default compose(
  connect(
    null,
    mapDispatchToProps,
  ),
  injectIntl,
)(Contacts);

Создать оболочку

import { IntlProvider } from 'react-intl';

const IntlWrapper = ({ children }) => (
  <IntlProvider locale="en">{children}</IntlProvider>
);

const intlMock = {
  ...
  formatMessage: message => message,
  ...
};

и для проверки укажите оболочку в Аргумент параметров рендеринга

render(
  <Contacts
    // pass all the props necessary for a basic render
    clearAll={jest.fn()}
    fetchContacts={jest.fn()}
    intl={intlMock}
  />,
  {
    wrapper: IntlWrapper
  }
);

react-testing-library содержит много документации, но ее стоит прочитать. Надеюсь, это поможет вам.