使用 testing-library/react-native 进行测试时检查 `InstanceImage` 的渲染方法答案

【问题标题】：Check the render method of `InstanceImage` while testing using testing-library/react-native使用 testing-library/react-native 进行测试时检查 `InstanceImage` 的渲染方法
【发布时间】：2021-07-08 04:15:36
【问题描述】：

我正在尝试使用 testing-library/react-native 使用 Redux 测试功能组件。

//InstanceImage.component.js
export default InstanceImage = (props) => {
  // <props init, code reduced >

  const { deviceId, instanceId } = DeviceUtils.parseDeviceInstanceId(deviceInstanceId)
  const deviceMap = useSelector(state => {
    return CommonUtils.returnDefaultOnUndefined((state) => {
      return state.deviceReducer.deviceMap
    }, state, {})
  })
  const device = deviceMap[deviceId]
  const instanceDetail = device.reported.instances[instanceId]
  if (device.desired.instances[instanceId] !== undefined) {
    return (
      <View
        height={height}
        width={width}
      >
        <ActivityIndicator
          testID={testID}
          size={loadingIconSize}
          color={fill}
        />
      </View>
    )
  }
  const CardImage = ImageUtils[instanceDetail.instanceImage] === undefined ? ImageUtils.custom : ImageUtils[instanceDetail.instanceImage]

  return (
    <CardImage
      testID={testID}
      height={height}
      width={width}
      fill={fill}
      style={style}
    />
  )
}

而测试文件是

//InstanceImage.component.test.js
import React from 'react'
import { StyleSheet } from 'react-native';
import { color } from '../../../../src/utils/Color.utils';
import ConstantsUtils from '../../../../src/utils/Constants.utils';
import { default as Helper } from '../../../helpers/redux/device/UpdateDeviceInstanceIfLatestHelper';
import InstanceImage from '../../../../src/components/Switches/InstanceImage.component';
import { Provider } from 'react-redux';
import { render } from '@testing-library/react-native';
import configureMockStore from "redux-mock-store";
import TestConstants from '../../../../e2e/TestConstants';


const mockStore = configureMockStore();
const store = mockStore({
    deviceReducer: {
        deviceMap: Helper.getDeviceMap()
    }
});

const currentState = ConstantsUtils.constant.OFF

const styles = StyleSheet.create({
    // styles init
  })
  
const props = {
    //props init
}

describe('Render InstanceImage', () => {
    it('InstanceImage renders correctly with values from props and Redux', () => {
        const rendered = render(<Provider store={store}>
            <InstanceImage {...props}/>
        </Provider>)

        const testComponent = rendered.getByTestId(TestConstants.icons.INSTANCE_IMAGE)
    });
})

当我运行测试文件时，它给出了以下错误

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `InstanceImage`.

应用程序运行时组件正常运行且没有任何崩溃。尽管如此，在执行测试时仍会发生此错误。我是为 react native 应用程序创建测试用例的新手，因此无法调试此问题。

【问题讨论】：

标签： react-native redux integration-testing react-testing-library

【解决方案1】：

发现错误，CardImage 返回导致问题的自定义 svg 图像。我使用了jest-svg-transformer，它解决了这个问题。

参考：https://stackoverflow.com/a/63042067/4795837

【讨论】：