Тестирование рекомбинации с энзимом - проблема доступа к реквизиту

Question

Итак, я искал ответ и до сих пор не нашел тот, который соответствует моему варианту использования. Я немного новичок в тестировании с Jest/Enzyme и очень новичок в тестировании с рекомпозицией.

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

Вот пример моего функционального компонента, я назову UserDetails

const UserDetails = ({
 userInfo,
 onUserInfoUpdate,
 className,
 error,
 title,
 primaryBtnTitle,
 submit,
 secondaryBtnTitle,
 secondaryBtnFunc,
 ...props
}) => (
 <div className={className}>
   <div className="user-details-body">
     <Section title="User details">
       <TextInput
         caption="First Name"
         value={userInfo.first}
         onChange={onUserInfoUpdate('first')}
         name="first-name"
         min="1"
         max="30"
         autoComplete="first-name"
       />
       <TextInput
         caption="Last Name"
         value={userInfo.last}
         onChange={onUserInfoUpdate('last')}
         name="last-name"
         min="1"
         max="30"
         autoComplete="last-name"
       />
     </Section>
   </div>

   <div className="errorBar">
     {error && <Alert type="danger">{error}</Alert>}
   </div>

   <ActionBar>
     <ButtonGroup>
       <Button type="secondary" onClick={secondaryBtnFunc}>
         {secondaryBtnTitle}
       </Button>
       <Button type="primary" onClick={submit}>
         {primaryBtnTitle}
       </Button>
     </ButtonGroup>
   </ActionBar>
 </div>

Вот пример кода моего файла index.js, который составляет мои withState и withHandlers для моего компонента:

import UserDetails from './UserDetails'
import { withState, withHandlers, compose } from 'recompose'

export default compose(
  withState('error', 'updateError', ''),
  withState('userInfo', 'updateUserInfo', {
    first: '',
    last: '',
  }),
  withHandlers({
    onUserInfoUpdate: ({ userInfo, updateUserInfo }) => key => e => {
      e.preventDefault()
      updateCardInfo({
        ...cardInfo,
        [key]: e.target.value,
      })
    },
    submit: ({ userInfo, submitUserInfo }) => key => e => {
      e.preventDefault()
      submitUserInfo(userInfo) 
      //submitUserInfo is a graphQL mutation
      })
    }  
  }) 
)

Сейчас я пытаюсь написать тесты для этого компонента. Я импортирую индексный файл, который имеет Компонент, обернутый, чтобы создать HOC.

import React from 'react'
import renderer from 'react-test-renderer'
import { mount, shallow } from 'enzyme' 
import UserDetails from './'

describe('UserDetails Element', () => {
  it('test', () => {
    const tree = mount( <UserDetails /> )
  console.log(tree.props());
  })
})

Журнал консоли дает мне это в терминале

{ children: 
  { '$$typeof': Symbol(react.element),
    type: 
      { [Function: WithState]
        displayName: 'withState(withState(withHandlers((UserDetails)))))' },
      key: null,
      ref: null,
      props: {},
      _owner: null,
      _store: {} } }

Я получаю такой же вывод, если я console.log tree.props('userInfo'), Я получаю неопределенный, если я console.log tree.prop('userInfo') или же tree.props().userInfo

Кроме того, когда я пытаюсь использовать свои обработчики в тестовом файле, я получаю сообщение об ошибке, что метод не определен.

Куда я иду не так? Спасибо!

Answer 1

Ваш тест загружает расширенный компонент, а не базовый компонент UserDetails составная часть. Так что вы видите с console.log реквизит самого внешнего компонента (compose). Вы можете получить внутренние компоненты, используя tree.find(UserDetails),

Для этого вам нужно будет импортировать оба файла в тесте:

import UserDetails from './'
import BareUserDetails from './UserDetails'

а также find это так

const tree = mount( <UserDetails /> )
const innerDetails = tree.find(BareUserDetails);

enzyme "s find не всегда находит то, что вы хотите, так, как вы ожидали. Экспериментируйте с различными вариантами, которые find предложения.