Jest: Scherz für Reaktiv-Native erkennt nicht alle Requisiten für<touchablehighlight/>

Erstellt am 16. Sept. 2016 · 3Kommentare · Quelle: facebook/jest

Ich habe eine Klasse für meine benutzerdefinierte Schaltfläche:

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;

und der Snapshot wird mit diesem Test erstellt:

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

aber wenn ich dem Element <TouchableHighlight/> eine weitere Requisite hinzufüge, wie:

underlayColor={'blue'}

und führen Sie den Test erneut aus - ich bekomme keinen Unterschied, der zeigt, dass der Schnappschuss diese zusätzliche Stütze nicht erwartet hat. Tatsächlich wurde die einzige Requisite als "Stil" bewertet.
Ist diese Arbeit in Arbeit?
Außerdem in einem verwandten Hinweis - warum wird der Typ von TouchableHighlight im Snapshot (und im Debugger) als "Ansicht" und nicht als "TouchableHightlight" angezeigt?

In meinem package.jason habe ich:

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

und meine .babelrc im Root-Verzeichnis ist:

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

Quelle

rosiakr

Hilfreichster Kommentar

@cpojer Vielen Dank für die schnelle Antwort! Mein Schnappschuss sieht jetzt viel sauberer aus.
Zusätzliche Frage - derzeit beschwert sich meine Ausgabe, dass ich eine Zeile nicht abdecke, die onPress prop als übergebene Funktion angibt

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

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

Hast du eine Idee, wie ich das Klicken von Schaltflächen simulieren kann? Oder tun Sie etwas, damit mein Test onPress={() => {this.props.onClick()}} > abdeckt? In deinen Tutorials konnte ich nichts zu diesem Thema finden.

Vielen Dank im Voraus!

rosiakr am 19. Sept. 2016

👍9

Alle 3 Kommentare

Wir verspotten TouchableHighlight nicht speziell. Es wird als Ansicht gerendert, weil es dazu von Reactive-native gerendert wird.

Es scheint, als ob TouchableHighlight Requisiten direkt auf seinem nativen Hintergrundelement setzt: https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableHighlight.js#L200 und Sie benötigen einen speziellen Mock damit Ihre Requisite in der gerenderten Ausgabe angezeigt wird.

Eine Sache, die funktionieren könnte, könnte sein, einen eigenen Mock zu erstellen, wie im zweiten Beispiel auf der Website vorgeschlagen: http://facebook.github.io/jest/docs/tutorial-react-native.html#mock -native-modules- mit-scherz-mock

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

cpojer am 17. Sept. 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>

Vielen Dank im Voraus!

rosiakr am 19. Sept. 2016

👍9

@rosiakr Ja, Sie können das Schaltflächenklick-Ereignis testen.
Hier ist ein Code, den ich geschrieben habe, um das Klicken auf die Schaltfläche zu testen.

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 am 12. Juli 2018

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Jest: Scherz für Reaktiv-Native erkennt nicht alle Requisiten für<touchablehighlight/>

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen