Модульный тест для составления HOC - PullRequest
Новая
       38

Модульный тест для составления HOC

0 голосов
/ 13 ноября 2018

Как я могу проверить этот HOC с энзимом?Я пробовал мелкий, но он покрывает только 40% компонента. 

export default compose(
  withState('showDropdown', 'handleDropdown', false),
  withHandlers({
    handleClickOutside: props => () => {
      props.handleDropdown(false)
    },
    menuItemClick: props => () => {
      props.handleDropdown(false)
    },
  }),
  onClickOutside,
)(AccountDropdown)

это код моего теста 

const props = {
  showDropdown: false,
  handleDropdown: jest.fn(),
  menuItemClick: jest.fn(),
  onLogout: jest.fn(),
  user: {},
}

const output = mount(<AccountDropdown
  showDropdown={props.showDropdown}
  handleDropdown={props.handleDropdown}
  menuItemClick={props.menuItemClick}
  onLogout={props.onLogout}
  user={props.user}
/>)

console.log('output', output)

const TogleDropdown = output.find('TogleDropdown')
console.log('TogleDropdown', TogleDropdown)
expect(shallowToJson(output)).toMatchSnapshot()

также я не могу тестировать события, потому что вывод console.log: 

output ReactWrapper {}

1 Ответ

0 голосов
/ 21 ноября 2018

Разделите ваш код. Дайте энхансеру один файл, а компоненту другой.

На энхансере экспортируйте только сгенерированный HOC: 

export default compose(
  withState('showDropdown', 'handleDropdown', false),
  withHandlers({
    handleClickOutside: props => () => {
      props.handleDropdown(false)
    },
    menuItemClick: props => () => {
      props.handleDropdown(false)
    },
  }),
  onClickOutside,
)

В другом файле экспортируйте только AccountDropdown (без переноса). Затем в другом месте экспортируйте их «комбинацию»: 

import enhancer from './enhancer.js';
import AccountDropdown from './AccountDropdown.jsx';

export default enhancer(AccountDropdown);

Теперь, на тестах, импортируйте каждый отдельный файл, «улучшайте» компонент и найдите его правильно: 

import enhancer from './enhancer.js';
import AccountDropdown from './AccountDropdown.jsx';

const Component = enhancer(AccountDropdown);

const props = {
  showDropdown: false,
  handleDropdown: jest.fn(),
  menuItemClick: jest.fn(),
  onLogout: jest.fn(),
  user: {},
}

const output = mount(<Component {...props} />)

const ToggleDropdown = output.find(AccountDropdown) // no quotes

ваш ToggleDropdown будет иметь компонент для тестирования. Пример: 

expect(handleDropdown).to.have.property('callCount', 0);

Обратите внимание, что mount вернет ReactWrapper, в соответствии с документами . Вы можете взглянуть на реквизит с помощью функции ToggleDropdown.props().

...