使用 Enzyme 测试 React Native 组件时遇到的 "Error: ShallowWrapper can only wrap valid elements" 问题解决方式

背景

在 React Native 开发中，我们常常使用 Enzyme 来进行组件测试。Enzyme 提供了一套专门用于测试组件的 API，可以方便地模拟用户交互或检查组件渲染结果。

在使用 Enzyme 测试 React Native 组件时，我们可能会遇到下面这个错误：

Error: ShallowWrapper can only wrap valid elements

这个错误通常是由于 shallow 函数传入了一个无效的元素，导致测试无法进行。这个问题可能出现在多个场景中，下面我们将分别介绍这些场景以及解决方法。

场景一：使用 shallow 函数测试引用了未导出组件的文件

在 React Native 中，我们经常会将一些通用的组件封装在单独的文件中，然后在其他组件中引用它们。例如，我们可能会有一个名为 TextInputWithLabel 的组件，它将一个 TextInput 组件和一个 Text 组件包裹在一个 View 组件中，并提供一个标签的文字描述。那么，在其他组件中使用 TextInputWithLabel 省去了重复写这个组件的代码。

然而，在测试 TextInputWithLabel 组件时，如果组件文件中引用了未导出的组件，就会出现上述错误。例如，如果 TextInputWithLabel 文件中使用了 View 组件而未导入，那么测试时就会出现这个错误。

解决方法：在文件中导入组件即可。例如，在 TextInputWithLabel 组件中：

// javascriptcn.com 代码示例
import React from 'react'
import { View, Text, TextInput } from 'react-native'

const TextInputWithLabel = ({ label }) => (
  <View>
    <Text>{label}</Text>
    <TextInput />
  </View>
)

export default TextInputWithLabel

场景二：使用 shallow 函数测试未经过 react-redux 包装的组件

在 React Native 应用中，我们常常使用 react-redux 来管理应用的状态。react-redux 提供了一套高度抽象的 API 来实现状态到组件的映射，从而帮助我们轻松地使用 Redux 管理应用状态。

然而，在测试组件时，如果组件未经过 react-redux 包装，则使用了 connect 函数的组件就会出现上述错误。这是因为，connect 函数输出的组件具有了额外的属性和方法，而这些属性和方法在测试时需要进行模拟，否则会报错。

解决方法：使用 Provider 组件和 mockStore 来模拟应用状态。例如，在测试 MyComponent 组件时：

// javascriptcn.com 代码示例
import React from 'react'
import MyComponent from '../MyComponent'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { shallow } from 'enzyme'

const mockStore = configureStore([])

describe('MyComponent', () => {
  it('renders', () => {
    const store = mockStore({})
    const wrapper = shallow(
      <Provider store={store}>
        <MyComponent />
      </Provider>
    )

    expect(wrapper).toMatchSnapshot()
  })
})

场景三：使用 shallow 函数测试没有返回 View 的组件

在 React Native 中，一个组件必须返回一个 View 或其它可渲染组件，否则会导致渲染错误。然而，在测试组件时，如果组件未返回 View，使用 shallow 函数进行测试时也会出现上述错误。

解决方法：让组件返回 View 或其它可渲染组件。例如，在 MyComponent 组件中：

// javascriptcn.com 代码示例
import React from 'react'
import { Text, View } from 'react-native'

const MyComponent = ({ message }) => {
  return (
    <View>
      <Text>{message}</Text>
    </View>
  )
}

export default MyComponent

总结

在使用 Enzyme 测试 React Native 组件时，遇到上述错误这些常见场景需要注意。这些问题的解决方案都是比较简单的，只要找到问题的根源，然后进行修复即可。

通过学习这些问题的解决方式，我们可以更好地编写 React Native 组件测试。同时，也可以更深入地了解 Enzyme 和 React Native 的相关机制，为开发提供更多的支持。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65289d717d4982a6ebb222e3