Когда я "симулирую ('click')" на кнопке дочернего компонента оболочки, которая вызывает функцию onClick, реквизиты корневого компонента не обновляются

Question

Я новичок в React и погуглил много источников, но не смог решить мою проблему ...

Когда я нажимаю на кнопку через "имитация (щелчок)", она работает, и я вижу правильноерезультат моего теста «вызывает props.onPointDelete».Но после этого я должен увидеть новые реквизиты этой обертки (pointsList), полученные из корневого компонента App, где у меня есть обработчик onClick.И это не обновляется.Это второй тест «points.length равен 1», который не прошел.Компонент PointsList является функциональным компонентом.

Я попытался обновить свою оболочку с помощью функции afterEach (), но она не работает.Может быть, эта проблема как-то связана с способом mount () моей обертки?Но я не могу использовать shallow (), потому что мне нужно получить доступ к дочернему компоненту дочернего элемента моей оболочки для моих текущих тестов.Можете ли вы помочь мне, пожалуйста?

PointsList.spec.js:

import React from 'react';
import {mount} from 'enzyme';
import PointsList from './PointsList';

describe('PointsList component', () => {
const mockOnPointDelete = jest.fn();

const props = {
    points: [
      {
        id: 1,
        name: 'Point 1',
        coordinates: [55.50, 57.50]
      },
      {
        id: 2,
        name: 'Point 2',
        coordinates: [55.51, 57.51]
      }
    ],
    onPointDelete: mockOnPointDelete,
    onDragEnd: () => {
    }
  };

  describe('PointsList component initial', () => {
    const pointsList = mount(<PointsList {...props} />);

    describe('when deleting first point', () => {
      pointsList.find('li').at(1).find('.btn.btn-delete').simulate('click');

      afterEach(() => {
        pointsList.update();
      });

      it('calls the props.onPointDelete', () => {
        expect(mockOnPointDelete).toHaveBeenCalledTimes(1);
      });

      it('points.length equals 1', () => {
        expect(pointsList.prop('points')).toHaveLength(1);
      });

    });

  })
});

PointsList.js:

import React from 'react';
import {Droppable, Draggable, DragDropContext} from 'react-beautiful-dnd';
import RoutePoint from '../RoutePoint';

const PointsList = (props) => {

  const {points, onPointDelete, onDragEnd} = props;

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="pointsDroppable">
        { (provided) => (
          <ul className='list-group'
              ref={provided.innerRef}>
            { points.map((point, i) => {
              const {id, ...itemProps} = point;
              return (
                <Draggable key={id} draggableId={'draggable-' + id} index={i}>
                {provided => (
                  <li className='list-group-item'
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                  >
                    <RoutePoint onPointDelete={() => onPointDelete(id)} {...itemProps}/>
                  </li>
                )}
                </Draggable>
              );
            })}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default PointsList;

Answer 1

Вы смешиваете интеграционный тест с модульным тестированием.То, что у вас есть выше, это юнит-тестирование.Поскольку вы только монтировали (вы могли просто использовать shallow вместо mount) функцию PointList без состояний и высмеивали функцию onPointDelete, jest не знает ни о parent, ни о ее методах.Проще говоря, вы выделили свой тест на child, , а не на родителя + ребенка .Вы не вызываете метод onPointDelete родителя, вы просто вызываете поддельную / поддельную функцию!

Если вы хотите выполнить интеграционный тест с parent + child , тогда mount parent, который содержит child, установите родительский state (так же, как вы сделали выше для props, просто используйте parent.setState(...)), сделайте , а не издевайтесь над onPointDeleteфункция, а теперь тест для изменений state и / или prop.

---

Вот пример интеграции и модульного тестирования : https://codesandbox.io/s/p3ro0615nm (I 'используя пользовательские функции shallowWrap и mountWrap, о которых вы можете найти больше информации в tests/utils/index.js - вы можете запустить тесты, нажав на вкладку Tests в нижней части экрана, затем Console и Problems)

Тест в containers/LOAs/__tests__/LOAs.test.js является интеграционным тестом.Этот тест проходит через несколько компонентов и проверяет общую функциональность между родительскими и дочерними узлами, а также проверяет наличие обновлений state.Я оставил некоторые тесты незаполненными, поэтому, если вы хотите, вы можете заполнить их для практики.

Тест в components/LoaList/__tests__/loaList.test.js является модульным тестом - обратите внимание, что этот тест не нужен, так как он уже описан вышеинтеграционный тест, но здесь он приведен в качестве примера для изоляции дочернего компонента от родительского.Этот тест проверяет функциональность дочерних компонентов, проверку prop и вызов фиктивной функции.