Вот есть у меня тест из коробки (из create-react-app):

import React from 'react';
import ReactDOM from 'react-dom';
import { MemoryRouter } from 'react-router-dom';
import App from './App';

it('default route renders without crashing', () => {
  const div1 = document.createElement('div');
  ReactDOM.render(
    <MemoryRouter>
      <App />
    </MemoryRouter>, div1);
});

он тестит только render и compomentDidMount дефолтого роутинга — он не падает.

дописал так:

for (let AnComponent of App.GetMenuComponents()) {
    const name = AnComponent.displayName || AnComponent.name;

    it(`RENDER {${name}}`, () => {
        console.log(`---===*** Component: [${name}], type: [${typeof AnComponent}] ***===--- `);
        const div2 = document.createElement('div');
        ReactDOM.render(<MemoryRouter><AnComponent/></MemoryRouter>, div2);
    });
}

стало лучше. тестируются тоже самое у всех компоненты, но череж одно место.

А как потестить обработку данных с web-api. Вот есть у меня живой WebAPI на http://localhost:5678/ и я знаю какие он данные шлет.
Надо в тесте для каждой заданной URL (одна урла на каждый роут)
1. дождаться пока загрузятся данные (данные приходят как из fetch в componentDidMount так и из WebSocket, который тоже создается в componentDidMount но сервер сначала тупит 0,5 секунды после создания соединенния и только потом отправляет, fetch понятно сразу получает ответ)
2. дождаться пока сработают "биндинги" полученных данных в приложении. Наверно это тоже самое что и 1, но если 1 упал то 2й не нужен.
3. захватить и вывести в консоль/лог все что в console
4. убедится что данные верные в DOM — это уже опционально.
5. А вот получить скриншот это я понимаю уже не все могут. Если что запустить headless хром не проблема.

В дальнейшем желательно как в Selenium возможность ввода данных в поля и нажатие кнопок. Но я хз зачем это лишнее.

Кто чем пользуется?
Вот тут их миллиард всяких: https://docs.travis-ci.com/user/gui-and-headless-browsers/