web-dev-qa-db-ja.com

TypeError：jestテストで未定義のプロパティ「プロトタイプ」を読み取れません

****************************編集および更新済み******************* *****

反応ナビゲーションを使用する追加情報コンポーネントがあります。

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を使用しています。

-----> 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
}
javascriptreactjsreact-nativejestjsenzyme
3
Ackman

コンポーネントをテストにどのようにインポートしますか？

あなたは上でそれを説明しなかったので、私はあなたがそれを問題として見ていないと思います。

以前にこのエラーを見たことがあります。コンポーネントをクラスとしてエクスポートする場合、コンポーネントをテストとしてオブジェクトとしてインポートする必要があります。

これを試して：

export class AdditionalInfo extends NavigationPureComponent {}

テストにインポートする場合：

import { AdditionalInfo } from '../pathToYourComponent'
5
zero_cool

誰かが私としてそれを見つけた場合にだけ答えます。

//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'
1
Yogendra Porwal