我试图对此组件进行快照:
export default class LoginExternalApi extends Component {
constructor(props) {
super(props);
}
render() {
let store = this.props.store.getState();
return (
<View style={styles.container}>
{store.facebookToken ? null : <FacebookButtonConnect />}
{store.spotifyToken ? null : <SpotifyButtonConnect />}
</View>
)
}
}
正如您所看到的,我在store
方法中有一个render()
变量,它会调用道具。
这是我基于Jest librairie的测试文件:
import 'react-native';
import React from 'react';
import LoginExternalApi from '../app/scenes/LoginExternalApi';
import renderer from 'react-test-renderer';
test('LoginExternalApi scene renders correctly', () => {
const tree = renderer.create(
<LoginExternalApi />
).toJSON();
expect(tree).toMatchSnapshot();
});
这是我的错误:TypeError: Cannot read property 'getState' of undefined
有关我的测试应如何编写的任何想法?我应该嘲笑我的商店吗?怎么样?
答案 0 :(得分:3)
这实际上取决于您的商店通常如何作为道具结束,以及您希望如何测试您的组件是否正确呈现。
例如,您可以模拟您的商店,然后为每个提供商创建一个版本。
test('LoginExternalApi scene renders Spotify connect button', () =>
let store = {
getState() {
return { spotifyToken: 'foo' }
}
};
const tree = renderer.create(
<LoginExternalApi store={store} />
).toJSON();
expect(tree).toMatchSnapshot();
});
但是,看起来您正在使用Redux,您可能会发现随着组件的增长,他们需要使用商店API的其他部分 - 例如,调度行动。在这一点上,对真实商店进行测试可能更容易,而不是嘲笑它。
react-redux API使得为您的商店获取给定组件变得微不足道,而不必考虑将商店作为每个级别的道具传递。
const tree = renderer.create(
<Provider store={store}>
<LoginExternalApi />
</Provider>
).toJSON();
只要您的<LoginExternalApi />
组件通过connect
函数与商店连接,就可以将其包装在显式商店中进行测试。