Как тестировать метод компонента с jest/enzyme?

Question

[Артур]

Пробую протестировать компонент лист тудушек.
Написал тест, в котором просто рендерится компонент.
Что еще обычно тестируют в компоненте?

Пробую протестировать метод рендера, в котором рисуются тудушки с переданными функциями, но не пойму как проверить что функции переданы в отрисовываемый компонент?

Вот код тестируемого компонента

import React from 'react';
import Todo from '../Todo'
import {Pane, Heading} from 'evergreen-ui';
import PropTypes from 'prop-types';

const TodoList = ({todos, TODO_UPD}) => {
  const renderBlocks = () => {
    return todos.map(block => {
      return <Todo
        key={block.id}
        complete={block.complete ? 'completed' : ''}
        text={block.text}
        onBlockClick={() => TODO_UPD(block.id)}
      />
    });
  };

  return (
    <Pane>
      {renderBlocks()}
    </Pane>
  );
};

TodoList.propTypes = {
  data: PropTypes.arrayOf(PropTypes.shape(
    {
      id: PropTypes.number.isRequired,
      text: PropTypes.string.isRequired,
      complete: PropTypes.bool.isRequired,
    }),
  ),
};

export default TodoList;

а вот код теста, в котором я хочу проверить передаваемые функции есть и срабатывают

describe('TodoList test', () => {
  const props = {
    todos: [{id: 1, complete: false, text: '1'},{id: 2, complete: false, text: '2'},{id: 3, complete: true, text: '3'}],
    TODO_UPD: jest.fn(),
  };

  it('should render todos with OnBlockClick func', () => {
    const wrapper = shallow(<TodoList {...props} />);
    const todo = wrapper.find(Todo).at(0);
    todo.simulate('click');
    expect(props.TODO_UPD).toBeCalled();
  });
});

Такой тест выпадает с ошибкой

expect(jest.fn()).toBeCalled()
Expected mock function to have been called, but it was not called.

Как правильно протестировать? что еще обычно тестируется в таких компонентах?

Answer 1

[Артур]

тестирование исполнения функций на вложенных компонентах нужно делать через mount компонента, вместо shallow

it('should render todos with OnBlockClick func', () => {
    const wrapper = mount(<TodoList {...props} />);
    const todo = wrapper.find(Todo).at(0);
    todo.simulate('click');
    expect(props.TODO_UPD).toBeCalled();
  });