カスタムボタンのクラスがあります。
import React, { Component } from 'react';
import { StyleSheet, View, TouchableHighlight, Text, Image } from 'react-native';
class NavBarBackButton extends Component {
static propTypes = {
onClick: React.PropTypes.func.isRequired,
buttonText: React.PropTypes.string,
customStyle: React.PropTypes.object
};
render() {
return (
<TouchableHighlight
style={[styles.backButton, this.props.customStyle]}
onPress={() => {this.props.onClick()}} >
<View style={{flexDirection: 'row'}}>
<Image
style={styles.backImage}
source={require('../img/back-128.png')}
/>
<Text style={styles.backButtonText}>
{this.props.buttonText}
</Text>
</View>
</TouchableHighlight>
);
}
}
const styles = StyleSheet.create({
backButton: {
justifyContent: 'center'
},
backButtonText: {
fontSize: 17,
textAlignVertical: 'center',
color: 'black',
},
backImage: {
width: 40,
height: 40
},
});
export default NavBarBackButton;
スナップショットは次のテストで生成されます。
import 'react-native';
import React from 'react';
import NavBarBackButton from '../navBarBackButton';
import renderer from 'react-test-renderer';
function doWork() {
console.log('Back button was clicked!');
}
it('renders all UI elements', () => {
const tree = renderer.create(
<NavBarBackButton onClick = {doWork}/>
).toJSON();
expect(tree).toMatchSnapshot();
});
しかし、 <TouchableHighlight/>
要素に別の小道具を追加すると、次のようになります。
underlayColor={'blue'}
テストを再実行します-スナップショットがこの余分な小道具を予期していなかったことを示す差分が表示されません。 実際、唯一の小道具は縫い目を「スタイル」と評価しました。
この作業は進行中ですか?
また、関連する注意事項として、TouchableHighlightのタイプがスナップショット(およびデバッガー)に「TouchableHightlight」ではなく「View」として表示されるのはなぜですか?
私のpackage.jasonには、次のものがあります。
{
"name": <my_project_name>,
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"jest": {
"preset": "jest-react-native",
"collectCoverage": true,
"verbose": true,
"preprocessorIgnorePatterns": [
"node_modules/(?!react-native|<my_project_name>|react-native-button)"
]
},
"dependencies": {
"lodash": "^4.15.0",
"react": "^15.3.1",
"react-native": "^0.33.0",
},
"devDependencies": {
"babel-jest": "^15.0.0",
"babel-polyfill": "^6.13.0",
"babel-preset-react-native": "^1.9.0",
"jest": "^15.1.1",
"jest-cli": "^15.1.1",
"jest-react-native": "^15.0.0",
"react-addons-test-utils": "^15.2.1",
"react-shallow-testutils": "^2.0.0",
"react-test-renderer": "^15.3.1"
}
}
ルートディレクトリの.babelrcは次のとおりです。
{
"presets": ["react-native"]
}
TouchableHighlightを特にモックすることはありません。 それがreact-nativeがレンダリングするものであるため、Viewとしてレンダリングされます。
TouchableHighlightがネイティブのバッキング要素に直接小道具を設定しているようです: https :
うまくいくかもしれない1つのことは、ウェブサイトの2番目の例で提案されているような独自のモックを作成することです: http ://facebook.github.io/jest/docs/tutorial-react-native.html#mock -native-modules- using-jest-mock
jest.mock('TouchableHighlight', () => {
const jestReactNative = require('jest-react-native');
return jestReactNative.mockComponent('TouchableHighlight');
});
@cpojer迅速な対応ありがとうございます! 私のスナップショットは今ではずっときれいに見えます。
追加の質問-現在、私の出力は、渡された関数としてonPress
propを指定する行をカバーしていないと文句を言っています
static propTypes = {
onClick: React.PropTypes.func.isRequired,
...
};
<TouchableHighlight
onPress={() => {this.props.onClick()}} > //no coverage for this line of code in test
...
</TouchableHighlight>
ボタンクリックをシミュレートする方法はありますか? または、私のテストをonPress={() => {this.props.onClick()}} >
カバーするために何かしますか? このテーマに関するチュートリアルには何も見つかりませんでした。
前もって感謝します!
@rosiakrはい、ボタンクリックイベントをテストできます。
これは、ボタンのクリックをテストするために私が書いたコードです。
class YourComponent extends Component {
handleButtonClick = () => {};
render() {
return <Button transparent onPress={() => this.handleButtonClick()}></Button>
}
}
//jest
it("Test Component", () => {
const component = renderer.create(
<YourComponent/>
);
// manually trigger the button click.
component.getInstance().handleButtonClick();
};
最も参考になるコメント
@cpojer迅速な対応ありがとうございます! 私のスナップショットは今ではずっときれいに見えます。
追加の質問-現在、私の出力は、渡された関数として
onPress
propを指定する行をカバーしていないと文句を言っていますボタンクリックをシミュレートする方法はありますか? または、私のテストを
onPress={() => {this.props.onClick()}} >
カバーするために何かしますか? このテーマに関するチュートリアルには何も見つかりませんでした。前もって感謝します!