Ошибка Nothing was returned from render в React-тесте: причины и исправление

При тестировании React-компонентов с помощью Jest и @testing-library/react разработчики часто сталкиваются с ошибкой Nothing was returned from render. Эта проблема возникает, когда мокированный компонент не возвращает JSX-элемент. Разберём типичный сценарий на примере компонента ReturnToRework.

Почему возникает ошибка Nothing was returned from render

Ошибка указывает, что React не получил результат рендеринга от функционального компонента. В вашем тесте мок для UnitFake использует jest.fn().mockImplementation(() => <div>test modal content</div>). Однако mockImplementation ожидает, что функция вернёт JSX, но React может интерпретировать возвращаемое значение как undefined из-за неправильной структуры мока. Частая причина - использование default экспорта без указания __esModule или неверное имя файла.

Как исправить мок модуля в Jest

Для корректной работы мока убедитесь, что путь к модулю совпадает с реальным расположением файла. В вашем случае jest.mock('../../../components/unit_fake', ...) должен указывать на полный путь до UnitFake. Также проверьте, что мок возвращает React-компонент, а не строку. Используйте mockReturnValue вместо mockImplementation для простоты:

jest.mock('../../../components/unit_fake', () => ({

  __esModule: true,

  default: () => <div>test modal content</div>,

}));

Такой подход гарантирует, что при вызове UnitFake вернётся валидный JSX.

Альтернативный подход: мок через фабрику

Если компонент принимает пропсы, используйте фабричную функцию:

jest.mock('../../../components/unit_fake', () => ({

  __esModule: true,

  default: jest.fn((props) => <div>{props.children || 'test'}</div>),

}));

Это позволит проверять пропсы в тестах и избежать ошибки Nothing was returned from render.

Проверка конфигурации тестового окружения

Убедитесь, что в файле setupTests.ts или jest.config.js правильно настроено окружение. Например, добавьте:

module.exports = {

  testEnvironment: 'jsdom',

  transform: {

    '^.+\.[t|j]sx?$': 'babel-jest',

  },

};

Без jsdom React не сможет корректно отрендерить компоненты, что также приводит к ошибке.

Распространённые ошибки при тестировании React SPA

• Неправильный путь к модулю - проверьте относительный путь в jest.mock.
• Отсутствие __esModule - для ES-модулей обязательно указывайте этот флаг.
• Использование строки вместо JSX - мок должен возвращать React-элемент, а не строку.
• Игнорирование пропсов - если компонент ожидает пропсы, передавайте их в моке.

Заключение

Ошибка Nothing was returned from render легко исправляется правильной настройкой мока модуля. Следуйте рекомендациям выше, и тестирование React-компонентов станет стабильным. Используйте mockReturnValue или фабричные функции для возврата JSX, проверяйте пути и конфигурацию Jest.