Что такое expect? Разделяете ли вы expect на отдельные логические it-блоки?

Поиск

expect - это функция, предоставляемая библиотеками для тестирования, такими как Jest, для проверки ожидаемых результатов в тестах. Она используется для сравнения фактического значения с ожидаемым значением и выполнения утверждений (assertions).

Пример использования expect в Jest:

test('два плюс два равно четыре', () => {
  expect(2 + 2).toBe(4);
});

В этом примере expect(2 + 2) возвращает объект, который имеет метод toBe(4), который сравнивает результат выражения 2 + 2 с ожидаемым значением 4.

Логическое разделение множества expect на отдельные it, нужно ли?

Множество expect

// Реализация, когда кладем однотипные проверки в один it блок
test('Переданные параметры должны рендериться внутри компонента', () => {
    const { getByText } = render(<InfoModal {...props} />)
     
    expect(getByText('modal')).toBeInTheDocument()    
    expect(getByText('modal description')).toBeInTheDocument()
    expect(getByText('phone number')).toBeInTheDocument()
    expect(getByText('phone caption')).toBeInTheDocument()
    expect(getByText('button')).toBeInTheDocument()
  })
 
// Реализация, когда разбиваем it блоки внутри группы describe
import { screen } from '@testing-library/dom'
 
describe('Переданные параметры должны рендериться внутри компонента', () => {
    beforeEach(() => {
      render(<InfoModal {...props} />)
    })
 
    it('Должна открыться модалка', () => {
        expect(screen.getByText('modal')).toBeInTheDocument()  
    })
    it('Должно отобразиться описание', () => {
      expect(screen.getByText('modal description')).toBeInTheDocument()
    })
    ...
  })

Предварительно декомпозируем it блоки.

Почему? Удобно следить за тестами и удалять/рефачить целые блоки it, в случае удаления/изменения UI-компонента.

Декомпозированные it

// Реализация, когда разбиваем it блоки внутри группы describe
import { screen } from '@testing-library/dom'
 
describe('Переданные параметры должны рендериться внутри компонента', () => {
    beforeEach(() => {
      render(<InfoModal {...props} />)
    })
 
    it('Должна открыться модалка', () => {
        expect(screen.getByText('modal')).toBeInTheDocument()  
    })
    it('Должно отобразиться описание', () => {
      expect(screen.getByText('modal description')).toBeInTheDocument()
    })
    ...
  })

В этом примере каждый it-блок проверяет отдельное утверждение. Это хорошая практика, так как:

Четкость: Каждый тест фокусируется на одном конкретном аспекте, что делает код более читаемым.
Отладка: Если один из тестов не проходит, легче понять, какая именно часть кода не работает.
Изоляция: Тесты изолированы друг от друга, что уменьшает вероятность того, что ошибка в одном тесте повлияет на другой.

Таким образом, да, я разделяю expect на отдельные it-блоки, чтобы обеспечить чистоту и удобство отладки тестов.