Jest: Jest for react-native ne reconnaît pas tous les accessoires pour<touchablehighlight/>

Créé le 16 sept. 2016 · 3Commentaires · Source: facebook/jest

J'ai une classe pour mon bouton personnalisé :

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;

et l'instantané est généré avec ce test :

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

mais quand j'ajoute un autre accessoire à l'élément <TouchableHighlight/> , comme :

underlayColor={'blue'}

et réexécutez le test - je n'obtiens pas de différence montrant que l'instantané ne s'attendait pas à cet accessoire supplémentaire. En fait, le seul accessoire évalué semble être le "style".
Ce travail est-il en cours ?
De plus, sur une note connexe, pourquoi le type de TouchableHighlight s'affiche-t-il dans l'instantané (et le débogueur) en tant que « View » et non « TouchableHightlight » ?

Dans mon package.jason j'ai :

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

et mon .babelrc dans le répertoire racine est :

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

Source

rosiakr

Commentaire le plus utile

@cpojer Merci pour la réponse rapide ! Mon instantané a l'air beaucoup plus propre maintenant.
Question supplémentaire - actuellement, ma sortie se plaint que je ne couvre pas une ligne qui spécifie onPress prop comme fonction transmise

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

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

Une idée de comment je peux simuler un clic sur un bouton ? Ou faire n'importe quoi pour que mon test couvre onPress={() => {this.props.onClick()}} > ? Je n'ai rien trouvé dans vos tutos sur le sujet.

Merci d'avance!

rosiakr le 19 sept. 2016

👍9

Tous les 3 commentaires

Nous ne nous moquons pas spécifiquement de TouchableHighlight. Il est rendu en tant que vue parce que c'est à cela que react-native le rend.

Il semble que TouchableHighlight place les accessoires directement sur son élément de support natif : https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableHighlight.js#L200 et vous auriez besoin d'une maquette spéciale pour qu'il fasse en sorte que votre accessoire apparaisse dans la sortie rendue.

Une chose qui pourrait fonctionner pourrait être de créer votre propre maquette comme suggéré dans le deuxième exemple sur le site Web : http://facebook.github.io/jest/docs/tutorial-react-native.html#mock -native-modules- utilisant-blague-dérision

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

cpojer le 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>

Merci d'avance!

rosiakr le 19 sept. 2016

👍9

@rosiakr Oui, vous pouvez tester l'événement de clic sur le bouton.
Voici un code que j'ai écrit pour tester le clic sur le bouton.

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