Jest: react-native 的 Jest 无法识别所有道具<touchablehighlight/>

创建于 2016-09-16 · 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”？

在我的 package.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 是：

{
  "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 于 2016-09-19

👍9

所有3条评论

我们没有专门模拟 TouchableHighlight。它被渲染为视图，因为这是 react-native 渲染它的。

似乎 TouchableHighlight 直接在其本机支持元素上设置道具： https :

可能有用的一件事可能是创建自己的模拟，如网站上第二个示例中所建议的： 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 于 2016-09-17

👍6 👎2 🎉1

@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 于 2016-09-19

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

YongzhaoZhang 于 2018-07-12

此页面是否有帮助？

0 / 5 - 0 等级

Jest: react-native 的 Jest 无法识别所有道具<touchablehighlight/>

最有用的评论

所有3条评论

相关问题