玩笑测试因 refs 和 Form 失败

我有一个搜索栏组件，如下所示：

  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 组件？请帮忙，我对这个东西比较陌生。

Issue

The ref回调没有被调用，所以this.searchForm is undefined when onChangeTextCallback()被调用。

Details

来自回调参考 https://reactjs.org/docs/refs-and-the-dom.html#callback-refs文档：“当组件安装时，React 将使用 DOM 元素调用 ref 回调”。

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

Solution

安装组件。既然你已经在使用Enzyme您可以使用mount() http://airbnb.io/enzyme/docs/api/mount.html。请注意，“完整的 DOM 渲染要求完整的 DOM API 在全局范围内可用”，例如Jest你可以配置要使用的测试环境jsdom https://jestjs.io/docs/en/configuration#testenvironment-string.