Question

TypeError：无法读取 jest 测试中未定义的属性“prototype”

2018-09-11

22025

javascript reactjs react-native jestjs enzyme

我有一个使用 React 导航的附加信息组件：

export class AdditionalInfo extends NavigationPureComponent {
  static navigationOptions = ({ navigation }) => ({
    headerLeft: <Button icon="close" onPress={() => navigation.goBack(null)} />,
  })

  buildNavigator = () => {
    const { extendedDescriptions } = this.nav.params
    const tabs = {}

    extendedDescriptions.forEach(({ caption, description }, index) => {
      tabs[`Tab${index}`] = {
        screen: () => (
          <ScrollView style={{ backgroundColor: color('white') }}>
            <Wrapper style={{ paddingTop: spacing() }}>
              <SafeAreaView>
                <Html html={description} />
              </SafeAreaView>
            </Wrapper>
          </ScrollView>
        ),
        navigationOptions: {
          title: caption,
        },
      }
    })

    return createMaterialTopTabNavigator(tabs, {
      backBehavior: 'none',
      lazy: true,
      tabBarOptions: {
        activeTintColor: color('b'),
        inactiveTintColor: color('b'),
        indicatorStyle: {
          backgroundColor: color('b'),
        },
        scrollEnabled: extendedDescriptions.length > 3,
        style: {
          backgroundColor: color('white'),
        },
      },
    })
  }

  render () {
    const AdditionalInfoNavigator = this.buildNavigator()

    return <AdditionalInfoNavigator />
  }

我的 additionalInfo.test.jsx 文件如下所示：

describe('Additional Info', () => {
  test('Additional info component Exists', () => {
    const length = 4
    const extendedDescriptions = Array.from({ length }).map((value, index) => ({
      caption: `Tab ${index}`,
      description: `${lorem}`,
    }))
    const obj = shallow(<AdditionalInfo navigation={{ extendedDescriptions }} />)
  })
})

我正在尝试编写一个测试来检查此附加信息组件是否存在，也许还有其他几个，但是我收到一个奇怪的错误，指出

TypeError: Cannot read property 'prototype' of undefined

      15 | 
      16 |     console.debug(extendedDescriptions)
    > 17 |     const obj = shallow(<AdditionalInfo navigation={{ extendedDescriptions }} />)

我觉得我没有提供附加信息测试实例所需的一切？还是我没有正确使用 shallow？

我正在使用定义为的 NavigationPureComponent：

export const NavigationPureComponent = navMixin(PureComponent)

const navMixin = (CurrentComponent) => {
  class Nav extends CurrentComponent {
    get nav () {
      const value = new Navigation(this)
      // reset `this.nav` to always be value, this way the this
      // get nav function only gets called the first time it's accessed
      Object.defineProperty(this, 'nav', {
        value,
        writable: false,
        configurable: false,
      })
      return value
    }
  }

  Nav.propTypes = {
    navigation: PropTypes.shape({}).isRequired,
  }

  return Nav
}

Answer 1

您如何将组件导入到测试中？

您上面没有描述，所以我想您不认为这是一个问题。

我以前见过这个错误。将组件导出为类时，您必须将组件作为对象导入到测试中。

试试这个：

export class AdditionalInfo extends NavigationPureComponent {}

当您导入到测试中时：

import { AdditionalInfo } from '../pathToYourComponent'

Answer 2

如果有人发现它是我，我就会回答。

//if exporting as 
export class AdditionalInfo extends NavigationPureComponent {}
//then import
import { AdditionalInfo } from '../pathToYourComponent'

//if exporting as 
class AdditionalInfo extends NavigationPureComponent {}
export default AdditionalInfo
//then import
import AdditionalInfo from '../pathToYourComponent'