шут тест не проходит с ссылками и формой

Question

У меня есть компонент панели поиска, который выглядит следующим образом:

  render () {
    const { onChangeTextInput } = this.props
    return (
      <Form
        name="searchForm"
        ref={(ref) => {
          this.searchForm = ref
        }}
      >
        <TextInput
          noSpacing
          placeholder={t('search')}
          name="search"
          validate="text"
          icon={this.icon}
          onChangeTextCallback={() => {
            onChangeTextInput(this.searchForm.values)
          }}
        />
        )
      </Form>
    )
  }
}

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

1. Пользователь вводит символ при вводе текста
2. вызывается метод обратного вызова, который предоставляет пользователю текст в качестве аргумента.

Тест, который я запускаю, имеет вид:

 test('SearchBar returns value on text change', () => {
        const onChangeFunction = jest.fn()
        const obj = shallow(
          <SearchBar onChangeTextInput={onChangeFunction} />
        )
        obj.find('TextInput').props().onChangeTextCallback('h')
        expect(onChangeFunction).toHaveBeenCalledWith('h')
      })

Я получаю странную ошибку, заявляющую:

TypeError: Cannot read property 'values' of undefined

  51 |           icon={this.icon}
  52 |           onChangeTextCallback={() => {
> 53 |             onChangeTextInput(this.searchForm.values)
     |                                                 ^
  54 |           }}
  55 |         />
  56 |         )

Мой дамп obj.html () для теста выглядит так:

<Form name="searchForm" if={true}>
  <TextInput
    noSpacing={true}
    placeholder="search"
    name="search"
    validate="text"
    icon={{
      $$typeof: Symbol(react.element),
      type: [(Function: Icon)],
      key: null,
      ref: null,
      props: {
        name: "search",
        size: 25,
        color: "#00a8ca",
        style: { position: "absolute", right: 0, bottom: 7 },
        allowFontScaling: false,
        type: "MaterialIcons",
        if: true,
      },
      _owner: null,
      _store: {},
    }}
    onChangeTextCallback={[(Function: onChangeTextCallback)]}
    value={null}
    style={{}}
    hasFloatingLabel={true}
    numberOfLines={1}
    isPassword={false}
    if={true}
  />
  )
</Form>

что здесь происходит? У меня есть пользовательская форма, которая дает мне значения через ссылки. Нужно ли что-то делать и, возможно, инициализировать компонент Form? пожалуйста, помогите, я относительно новичок в этом деле.

Answer 1

Issue

Обратный вызов ref не вызывается, поэтому this.searchForm равен undefined при вызове onChangeTextCallback().

информация

Из документов Callback Refs : «React будет вызывать функцию обратного вызова ref с элементом DOM, когда компонент монтируется».

В тесте вы используете shallow(). Мелкий рендеринг не монтирует компонент, поэтому обратный вызов ref никогда не вызывается.

Решение

Смонтируйте компонент. Поскольку вы уже используете Enzyme, вы можете использовать mount(). Обратите внимание, что «для полной визуализации DOM необходимо, чтобы в глобальной области видимости был доступен полный API DOM», для Jest вы можете настроить тестовую среду для использования jsdom.