Jest: Jest forreact-nativeはすべての小道具を認識しません<touchablehighlight/>

作成日 2016年09月16日  ·  3コメント  ·  ソース: facebook/jest

カスタムボタンのクラスがあります。

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"]
}

最も参考になるコメント

@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()}} >カバーするために何かしますか? このテーマに関するチュートリアルには何も見つかりませんでした。

前もって感謝します!

全てのコメント3件

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();
};
このページは役に立ちましたか?
0 / 5 - 0 評価