Антон Спирин

if (ariaExpanded === 'true') {

По клику выполнить history.push(newRoute) и обработать обновление url в componentDidUpdate(запросить каталог с обновленными параметрами).

componentDidMount() {
  window.addEventListener('beforeunload', this.handleWindowBeforeUnload);
}

handleWindowBeforeUnload = e => {
  // e - целевое событие
};

1. Обновляйте не свойство, а состояние компонента.
Component State
2. Передавайте в дочерние компоненты свойства на основе состояния:

render() {
  const { value } = this.state;
  return (
    <>
      <Child1 value={value} />
      <Child2 value={value} />
      <Child3 />
    </>
  );
}

3. В дочерних компонентах можно реагировать на обновление свойства:

componentDidUpdate(prevProps) {
  if (prevProps.value !== this.props.value) {
    this.doSomething();
  }
}

Симуляция пользовательского ввода.

Object property shorthand

this.setState({ scale: 'c', temperature });

равносильно:

this.setState({ scale: 'c', temperature: temperature });

Как симулировать клики мышкой на React компоненте?

Так же как и на любом другом DOM элементе.

загвоздка с выпадающими селектами на форме

select.value = someValue;
select.dispatchEvent(new Event('change', { bubbles: true }));

По принципу единственной ответственности метод getSum должен лишь возвращать сумму. Никаких дополнительных действий в нем происходить не должно.

Насчет последнего примера трудно что-либо посоветовать, так как это имеет мало общего с реальным клиентским кодом. Сам Summator лишняя неудобная сущность которую можно смело заменить на:

const sum = arr => arr.reduce((acc, i) => acc + i);

const calculateSquaresSum = arr => sum(arr.map(i => i.calcArea()));

Для логгирования в dev режиме обычно используют декораторы или middleware.

render() {
  const { playList, slug }  = this.props;
  const index = playList.findIndex(i => i.slug === slug);
  const video = playList[index];
  const prev = playList[index - 1];
  const next = playList[index + 1];
  
  render(
    <div>
      {/* ... */}
      <div>
        {prev && <Link to={`/video/${prev.slug}`}>Prev</Link>}
        {next && <Link to={`/video/${next.slug}`}>Next</Link>}
      </div>
    <div/>
  );
}

componentDidUpdate(prevProps) {
  if (prevProps.filmId !== this.props.filmId) {
    this.setCurrentFilm(this.props.filmId);
  }
}

Lifting state up

Не надо такой код писать. Работайте с состоянием компонента. Пример:

class ListItem extends React.Component {
  state = { isActive: false };

  toggleClick = {
    this.setState(state => ({ isActive: !state.isActive }));
  };

  render () { /* ... */ }
}

Потому что React никак не взаимодействует с элементами, которые созданы не с помощью React. У элементов созданных React есть специальные свойства добавленные библиотекой(__reactEventHandlers$[hash], __reactInternalInstance$[hash]).
Есть три варианта удалить созданные вручную элементы:
1. Удалить их вручную, для этого достаточно добавить им общий селектор и уничтожать перед обновлением.
2. Заменить ключ компонента списка, как предлагает Robur. React полностью заменит ваш список удалив и создав новую DOM ноду.
3. Демонтировать список и смонтировать заново. Тут React демонтирует компонент, удалит родительскую ноду вместе с вашими элементами и смонтирует новый компонент и создаст новую ноду.

const syntheticEvent = (target) => ({
  target,
  reventDefault: jest.fn(),
  stopPropagation: jest.fn(),
});

const event = syntheticEvent();

JSX это синтаксический сахар над вызовом React.createElement. Когда вы пишите <A />, вы делаете вызов:
React.createElement(A, null);
React под капотом создает экземпляр этого компонента.

Нет. HOC это функция, которая принимает компонент и возвращает новый компонент, так или иначе использующий переданный компонент.

Lifting state up

1. Метод createElement реализован в объекте document.
2. Подобные способы создания элементов в React разарботке лучше не использовать. Работайте с данными и рендерите компоненты на их основе.