Jest: प्रतिक्रिया देशी के लिए जेस्ट के लिए सभी सहारा नहीं पहचानता<touchablehighlight/>

को निर्मित 16 सित॰ 2016 · 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'}

और परीक्षण को फिर से चलाएं - मुझे यह दिखाने में कोई अंतर नहीं है कि स्नैपशॉट ने इस अतिरिक्त प्रोप की उम्मीद नहीं की थी। वास्तव में, एकमात्र प्रोप ने "स्टाइल" होने के लिए सीम का मूल्यांकन किया।
क्या यह कार्य प्रगति पर है?
साथ ही, संबंधित नोट पर - स्नैपशॉट (और डीबगर) में टच करने योग्य हाइलाइट का प्रकार 'व्यू' के रूप में क्यों दिख रहा है, न कि 'टचेबल हाइटलाइट'?

मेरे 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"]
}

स्रोत

rosiakr

सबसे उपयोगी टिप्पणी

@cpojer त्वरित प्रतिक्रिया के लिए धन्यवाद! मेरा स्नैपशॉट अब बहुत साफ दिखता है।
अतिरिक्त प्रश्न - वर्तमान में मेरा आउटपुट शिकायत करता है कि मैं एक लाइन को कवर नहीं कर रहा हूं जो onPress प्रोप को एक फ़ंक्शन के रूप में निर्दिष्ट करता है

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 19 सित॰ 2016

👍9

सभी 3 टिप्पणियाँ

हम विशेष रूप से TouchableHighlight का मजाक नहीं उड़ाते हैं। इसे व्यू के रूप में प्रस्तुत किया जाता है क्योंकि यही प्रतिक्रिया-मूल इसे प्रस्तुत करता है।

ऐसा लगता है जैसे TouchableHighlight सीधे अपने मूल बैकिंग तत्व पर प्रोप सेट करता है: https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableHighlight.js#L200 और आपको एक विशेष नकली की आवश्यकता होगी इसके लिए इसे बनाने के लिए ताकि आपका प्रोप प्रदान किए गए आउटपुट में दिखाई दे।

एक चीज जो काम कर सकती है वह हो सकती है वेबसाइट पर दूसरे उदाहरण में सुझाए गए अनुसार अपना खुद का मॉक बनाना: http://facebook.github.io/jest/docs/tutorial-react-native.html#mock -native-modules- प्रयोग-मजाक-मजाक

jest.mock('TouchableHighlight', () => {
  const jestReactNative = require('jest-react-native');
  return jestReactNative.mockComponent('TouchableHighlight');
});

cpojer 17 सित॰ 2016

👍6 👎2 🎉1

static propTypes = {
    onClick: React.PropTypes.func.isRequired,
    ...
};

<TouchableHighlight
    onPress={() => {this.props.onClick()}} > //no coverage for this line of code in test
    ...
</TouchableHighlight>

अग्रिम में धन्यवाद!

rosiakr 19 सित॰ 2016

👍9

@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();
};

YongzhaoZhang 12 जुल॰ 2018

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Jest: प्रतिक्रिया देशी के लिए जेस्ट के लिए सभी सहारा नहीं पहचानता<touchablehighlight/>

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों