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>
    )
  }
}

我正在使用浅层渲染和玩笑来运行单元测试以测试以下情况”

用户在文本输入中输入字符
触发回调方法，该方法为用户提供文本作为参数。

我正在运行的测试表示为：

 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

问题

调用ref时不会调用this.searchForm回调，因此undefined是onChangeTextCallback()。

详细信息

在Callback Refs文档中：“安装组件时，React将使用DOM元素调用ref回调”。

在测试中，您正在使用shallow()。浅渲染不会挂载组件，因此永远不会调用ref回调。

解决方案

安装组件。由于您已经在使用Enzyme，因此可以使用mount()。请注意，“完整的DOM呈现要求在全局范围内提供完整的DOM API”，对于Jest，您可以configure the test environment to use jsdom。

开玩笑的测试失败，并带有引用和表格

1 个答案: