Ack*_*man 4 javascript reactjs jestjs react-native enzyme
我有一个使用反应导航的附加信息组件:
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 />
}
Run Code Online (Sandbox Code Playgroud)
我的 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 }} />)
})
})
Run Code Online (Sandbox Code Playgroud)
我正在尝试编写一个测试来检查这个 AdditionalInfo 组件是否存在,也许还有一些,但是,我收到一个奇怪的错误说明
TypeError: Cannot read property 'prototype' of undefined
15 |
16 | console.debug(extendedDescriptions)
> 17 | const obj = shallow(<AdditionalInfo navigation={{ extendedDescriptions }} />)
Run Code Online (Sandbox Code Playgroud)
我觉得我没有提供 AdditionalInfo 测试实例所需的一切吗?还是我没有正确使用浅?
我使用的 NavigationPureComponent 定义为:
export const NavigationPureComponent = navMixin(PureComponent)
Run Code Online (Sandbox Code Playgroud)
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
}
Run Code Online (Sandbox Code Playgroud)
您如何将组件导入您的测试中?
你上面没有描述它,所以我想你不认为它是一个问题。
我以前见过这个错误。将组件作为类导出时,您必须将组件作为对象导入到测试中。
尝试这个:
export class AdditionalInfo extends NavigationPureComponent {}
Run Code Online (Sandbox Code Playgroud)
当您导入测试时:
import { AdditionalInfo } from '../pathToYourComponent'
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
16522 次 |
| 最近记录: |