Question

****************************编辑和更新**************** ********

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

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

我正试图编写一个测试来检查这个AdditionalInfo组件的存在，也许还有更多，但是，我收到一个奇怪的错误说明

TypeError: Cannot read property 'prototype' of undefined

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

我觉得我没有提供AdditionalInfo测试实例所需的一切吗？还是我没有正确使用浅表？

我使用的NavigationPureComponent定义为：

----->导出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'

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

2 个答案: