Menu
I have a Additional Info component which uses react navigation:
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 />
}
My additionalInfo.test.jsx file looks like:
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 }} />)
})
})
I am trying to write a test to check existence of this AdditionalInfo component and maybe a few more however, I am getting a weird error stating
TypeError: Cannot read property 'prototype' of undefined
15 |
16 | console.debug(extendedDescriptions)
> 17 | const obj = shallow(<AdditionalInfo navigation={{ extendedDescriptions }} />)
I feel am I not providing everything the test instance of AdditionalInfo needs? Or am I not using shallow correctly?
I am using the NavigationPureComponent which is defined as:
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
}
622
How are you importing the Component into your test?
You haven't described it above so I imagine you don't see it as an issue.
I've seen this error before. When exporting a component as a class, you have to import the component into your test as an object.
Try this:
export class AdditionalInfo extends NavigationPureComponent {}
When you're importing into your test:
import { AdditionalInfo } from '../pathToYourComponent'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
