Jest: Brincadeira de reagir-nativo não reconhece todos os adereços para<touchablehighlight/>

Criado em 16 set. 2016 · 3Comentários · Fonte: facebook/jest

Tenho uma aula para meu botão personalizado:

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;

e o instantâneo é gerado com este teste:

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

mas quando adiciono outro suporte ao elemento <TouchableHighlight/> , como:

underlayColor={'blue'}

e execute novamente o teste - não obtenho uma diferença mostrando que o instantâneo não esperava este suporte extra. Na verdade, o único suporte avaliou as costuras como "estilo".
Este trabalho está em andamento?
Além disso, em uma nota relacionada - por que o tipo de TouchableHighlight está sendo exibido no instantâneo (e no depurador) como 'Exibir' e não como 'TouchableHightlight'?

No meu package.jason tenho:

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

e meu .babelrc no diretório raiz é:

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

Fonte

rosiakr

Comentários muito úteis

@cpojer Obrigado pela resposta rápida! Meu instantâneo parece muito mais limpo agora.
Pergunta adicional - atualmente, minha saída reclama que não estou cobrindo uma linha que especifica onPress prop como uma função passada

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

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

Alguma ideia de como posso simular o clique de um botão? Ou fazer algo para que meu teste cubra onPress={() => {this.props.onClick()}} > ? Não consegui encontrar nada em seus tutoriais sobre o assunto.

Desde já, obrigado!

rosiakr em 19 set. 2016

👍9

Todos 3 comentários

Nós não zombamos especificamente do TouchableHighlight. Ele é renderizado como View porque é para isso que o react-native o renderiza.

Parece que TouchableHighlight define adereços diretamente em seu elemento de apoio nativo: https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableHighlight.js#L200 e você precisaria de um mock especial para fazer com que seu prop apareça na saída renderizada.

Uma coisa que pode funcionar pode ser criar sua própria simulação, conforme sugerido no segundo exemplo no site: 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 em 17 set. 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>

Desde já, obrigado!

rosiakr em 19 set. 2016

👍9

@rosiakr Sim, você pode testar o evento de clique de botão.
Aqui está um código que escrevi para testar o clique do botão.

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