Jest: لا يتعرف Jest على رد الفعل الأصلي على جميع الدعائم لـ<touchablehighlight/>

تم إنشاؤها على ١٦ سبتمبر ٢٠١٦ · 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"؟

في مجموعتي. 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 الخاص بي في root dir هو:

{
  "presets": ["react-native"]
}

مصدر

rosiakr

التعليق الأكثر فائدة

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 في ١٩ سبتمبر ٢٠١٦

👍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 في ١٧ سبتمبر ٢٠١٦

👍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 في ١٩ سبتمبر ٢٠١٦

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