Как написать тест?

Question

[cester]

Помогите пожалуйста, хотя б какими шагами надо тестировать этот код? Что за чем?

componentWillReceiveProps(nextProps) {
    if (nextProps.keydown.event) {
      const loc = nextProps.location.pathname;
      const his = nextProps.history;
      const k = nextProps.keydown.event.which;
      if (k === 39 && loc=== '/index') {
        his.push('/index/loc1');
      } else if (k === 39 && loc === '/index/loc1') {
        his.push('/index/loc2');
      } else if (k === 37 && loc === '/index/loc1') {
        his.push('/index');
      } else if (k === 37 && loc === '/index/loc2') {
        his.push('/index/loc1');
      }
    }
  }

Использую jest/enzyme.
Этот код делает следующее:
по стрелочками вправо / влево переключаются табы и меняется url.

Меня интересует что из этого я должен протестовать... переключение между всеми табами, а если их буду очень много? Буду очень благодарен за пример, какое-нибудь разъяснения как это писать.
Сейчас тест

it('test keyDown , switching tabs', () => {
    const A_KEY = 39;
    const props = {
      his: {
        hash: '',
        key: '',
        pathname: '/bob',
        search: '',
        push: jest.fn(),
      },
    };
    const enzymeWrapper = mount(
      <MemoryRouter
        initialEntries={['/', '/q1', '/q2']}
        initialIndex={1}
      >
        <Main{...props} />
      </MemoryRouter>,
    );
    enzymeWrapper.simulate('keyDown', [{
      which: A_KEY,
    }]);

    expect(props.his.push).toHaveBeenCalledTimes(1);
  });

Comments

[Philipp]

Обработка нажатия кнопок и карта адресов должны быть разделены.
Это же ад полный:

if (k === 39 && loc=== '/index') {
        his.push('/index/loc1');
      } else if (k === 39 && loc === '/index/loc1') {
        his.push('/index/loc2');
      } else if (k === 37 && loc === '/index/loc1') {
        his.push('/index');
      } else if (k === 37 && loc === '/index/loc2') {
        his.push('/index/loc1');
      }

Адреса должны быть вынесены в отдельный объект конфигурации, который можно будет использовать из тестов.

Answer 1

[Dimonchik]

научишься парсить реакт - озолотишься (с)

Answer 2

[Станислав Ботев]

wrapper.instance().componentWillReceiveProps({ location: { pathname: '/index' } }, 
keydown: { event: { which: 39 } } });

expect(wrapper).props('his').toBe('...');

или

expect(wrapper.props('his').push).toBeCalledWith('...');

Тесты необходимы для тестирования бизнес-логики и закрепления договоренностей о поведении. Ваш не тестирует ни поведение, ни логику. Разнесите логику из метода, напишите подробные тесты. Никогда не ленитесь писать тесты, для себя в будущем и пишите же.

Выглядеть структура должна так:

describe('Component', () => {
  ...
  describe('componentWillReceiveProps()', () => {
    it('if loc = "/index" && k = 39', () => {
      ...
    });
  });
});

Когда тестируете cWRP не нужно симулировать никакие события. Всю информацию Вы передаете в nextProps.