Как протестировать обработчики в withHandlers, branch и withState перекомпоновки с помощью фермента?

Я новичок в тестировании ферментов, и я сделал компонент как:

import React from 'react';
import {
  compose,
  withState,
  withHandlers,
  branch,
  pure,
  renderComponent,
} from 'recompose';

import Fields from './components/Fields';
import Flow from './components/Flow';

export const MODE = {
  preview: 'preview',
  edit: 'edit',
};

const inEditMode = ({ mode }) => mode === MODE.edit;

const Component = branch(
  inEditMode,
  renderComponent(Fields),
  renderComponent(Flow),
)(Flow);

const Tab = pure(props => <Component {...props} />);

export default compose(
  withState('mode', 'changeMode', props => {
    const path = props.path;

    return props.path ? MODE.preview : MODE.edit;
  }),
  withHandlers({
    changeMode: ({ changeMode }) => () => changeMode(currentState => currentState === MODE.preview ? MODE.edit : MODE.preview),
    onApprovalChange: ({ onAction, entity }) => data => {
      onAction({ ...data, status: 'UPDATED' }, data.id);
    },
  }),
)(Tab);

В приведенном выше компоненте я хочу проверить следующее:

  1. Рендеринг Component

  2. inEditMode функция компонента

  3. Обработчики присутствуют в withState и withHandlers

  4. branch утилита recompose (я действительно не думаю, что мне нужно это проверять, потому что они, возможно, уже сделали это, но предположим, что я хочу протестировать такую ​​​​функцию)

Я мог найти некоторую документацию по stackoverflow о тестировании, но не было ни одного ресурса, который мог бы дать общее представление.


person Ajay Gaur    schedule 06.09.2017    source источник
comment
В этом комментарии вы можете найти обходной путь: github.com/acdlite/ перекомпоновать/вопросы/407#issuecomment-309075313   -  person Gatsbimantico    schedule 02.11.2018


Ответы (1)


При тестировании вашего компонента вы должны тестировать только ваш компонент, а не контейнеры (функции, обертывающие его), поскольку они являются компонентами более высокого порядка.

Если вы хотите протестировать функции из recompose, посмотрите их собственные тесты: https://github.com/acdlite/recompose/blob/master/src/packages/recompose/tests/withState-test.js и просто напишите ваш собственный на основе этого.

Что касается вашего компонента, убедитесь, что вы экспортируете отдельные части и тестируете их. В вашем сценарии будет функциональный компонент inEditMode:

export const inEditMode = ({ mode }) => mode === MODE.edit;

Это все, что вам нужно для тестирования этого компонента.

person Gatsbimantico    schedule 02.11.2018
comment
Почему бы не протестировать контейнеры? Я думаю, что предпочтительнее протестировать все это, так как это будет потребляться где-либо еще. Реквизиты, переданные recompose, являются просто деталями реализации. - person Miguel Carvajal; 01.12.2018
comment
@MiguelCarvajal Точно так же, как вы не будете определять функцию каждый раз, когда вы ее используете, вы не будете тестировать ее, когда используете. Если я определяю utils parseAtoB, который используется в 10 компонентах, не имеет смысла проверять, возвращает ли вход A возврат B для каждого компонента. Конечно, я могу защитить свое приложение, создав тест для сторонней библиотеки, которую я использую, убедившись, что библиотека продолжает делать то, что мне нужно. Но позже мне просто нужно проверить, что я вызвал правильный функциональный компонент C, вызывающий parseAtoB, и ожидаю, что утилита сделает то, для чего предназначена. - person Gatsbimantico; 03.12.2018