Jest: Lelucon untuk reaksi-asli tidak mengenali semua alat peraga untuk<touchablehighlight/>

Dibuat pada 16 Sep 2016 · 3Komentar · Sumber: facebook/jest

Saya memiliki kelas untuk tombol khusus saya:

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;

dan snapshot dihasilkan dengan tes ini:

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

tetapi ketika saya menambahkan prop lain ke elemen <TouchableHighlight/> , seperti:

underlayColor={'blue'}

dan jalankan kembali tes - saya tidak mendapatkan perbedaan yang menunjukkan bahwa snapshot tidak mengharapkan prop tambahan ini. Faktanya, satu-satunya penyangga yang dievaluasi adalah "gaya".
Apakah pekerjaan ini sedang berlangsung?
Juga, pada catatan terkait - mengapa tipe TouchableHighlight ditampilkan dalam snapshot (dan debugger) sebagai 'Tampilan' dan bukan 'TouchableHightlight'?

Di package.jason saya, saya punya:

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

dan .babelrc saya di direktori root adalah:

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

Sumber

rosiakr

Komentar yang paling membantu

@cpojer Terima kasih atas tanggapan cepatnya! Snapshot saya terlihat jauh lebih bersih sekarang.
Pertanyaan tambahan - saat ini keluaran saya mengeluh bahwa saya tidak menutupi baris yang menentukan prop onPress sebagai fungsi yang diteruskan

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

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

Adakah yang tahu bagaimana saya dapat mensimulasikan klik tombol? Atau melakukan sesuatu agar pengujian saya mencakup onPress={() => {this.props.onClick()}} > ? Saya tidak dapat menemukan apa pun dalam tutorial Anda tentang masalah ini.

Terima kasih sebelumnya!

rosiakr pada 19 Sep 2016

👍9

Semua 3 komentar

Kami tidak secara khusus mengejek TouchableHighlight. Itu dirender sebagai View karena itulah yang dirender oleh react-native.

Sepertinya TouchableHighlight menyetel alat peraga langsung pada elemen pendukung aslinya: https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableHighlight.js#L200 dan Anda memerlukan tiruan khusus untuk membuatnya jadi prop Anda muncul di output yang diberikan.

Satu hal yang mungkin berhasil adalah membuat tiruan Anda sendiri seperti yang disarankan pada contoh kedua di situs web: http://facebook.github.io/jest/docs/tutorial-react-native.html#mock -native-modules- menggunakan-jest-mock

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

cpojer pada 17 Sep 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>

Terima kasih sebelumnya!

rosiakr pada 19 Sep 2016

👍9

@rosiakr Ya, Anda dapat menguji acara klik tombol.
Berikut adalah beberapa kode yang saya tulis untuk menguji klik tombol.

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