【问题标题】：Enzyme not rendering component names酶不呈现组件名称
【发布时间】：2018-10-18 15:03:51
【问题描述】：

我有一个最近升级到 0.56.0 的 React Native 应用程序。我可以毫无问题地在 Xcode 中构建应用程序，但我遇到了测试问题。似乎 Enzyme 没有呈现我的组件名称。这发生在我的所有组件中，所以我认为这是配置，但无法弄清楚。

我的问题是，“我错过了什么？是在某处配置吗？”

组件

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';

import styles from './styles';

export default class EmptyMessage extends Component {
  static propTypes = {
    children: PropTypes.string.isRequired,
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>{this.props.children}</Text>
      </View>
    );
  }
}

测试

import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { shallow } from 'enzyme';
import EmptyMessage from '../../components/EmptyMessage';

Enzyme.configure({ adapter: new Adapter() });

let props, wrapper;

const createTestProps = (props) => {
  return {
    ...props,
  };
};

const createWrapper = (props) => {
  return shallow(<EmptyMessage {...props}>Testing</EmptyMessage>);
};

beforeEach(() => {
  props = createTestProps();
  wrapper = createWrapper(props);
});

describe('EmptyMessage rendering', () => {
  it('should render a <View /> component', () => {
    console.log(wrapper.debug());
    expect(wrapper.find('View')).toHaveLength(1);
  });

  it('should render text', () => {
    expect(wrapper.find('Text').contains('Testing')).toBeTruthy();
  });
});

来自上面测试的调试消息

<Component style={{...}}>
  <Component style={{...}}>
    Testing
  </Component>
</Component>

如您所见，Components 应该是一个包装 <View>，然后是一个子 <Text>，但我似乎无法弄清楚为什么不是。

`react-native info`

React Native Environment Info:
System:
  OS: macOS High Sierra 10.13.6
  CPU: x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
  Memory: 1.41 GB / 16.00 GB
  Shell: 5.3 - /bin/zsh
Binaries:
  Node: 9.3.0 - ~/.nodenv/versions/9.3.0/bin/node
  Yarn: 1.10.1 - /usr/local/bin/yarn
  npm: 6.4.1 - ~/.nodenv/versions/9.3.0/bin/npm
  Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
  iOS SDK:
    Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
  Android SDK:
    Build Tools: 23.0.1, 25.0.3, 26.0.1, 26.0.3, 27.0.0, 27.0.3, 28.0.0
    API Levels: 23, 25, 26, 27, 28
IDEs:
  Android Studio: 3.1 AI-173.4819257
  Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
  react: 16.4.1 => 16.4.1
  react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
  react-native-cli: 2.0.1

笑话配置

"jest": {
  "preset": "react-native",
  "coverageDirectory": "coverage/",
  "setupFiles": [
    "<rootDir>/jest/setup.js"
  ],
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
    "^.+\\.js?$": "babel-jest"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!react-native|tcomb-form-native)",
    "!node_modules/react-runtime"
  ]
}

依赖关系

"devDependencies": {
  "@babel/core": "7.1.2",
  "apisauce": "^0.14.3",
  "axios-mock-adapter": "^1.15.0",
  "babel-eslint": "^9.0.0",
  "babel-jest": "^23.6.0",
  "babel-preset-env": "^1.7.0",
  "babel-preset-react-native": "5.0.2",
  "enzyme": "^3.3.0",
  "enzyme-adapter-react-16": "^1.1.1",
  "eslint-config-prettier": "^3.0.1",
  "eslint-plugin-prettier": "^2.6.2",
  "eslint-plugin-react": "^7.11.1",
  "husky": "^0.14.3",
  "jest": "^23.2.0",
  "jest-junit": "^3.6.0",
  "lodash": "^4.17.5",
  "prettier": "^1.14.3",
  "pretty-quick": "^1.4.1",
  "react-dom": "^16.4.0",
  "react-test-renderer": "16.2.0",
  "reactotron-react-native": "2.1.0",
  "reactotron-redux": "2.1.0",
  "redux-devtools": "^3.4.1",
  "redux-mock-store": "^1.5.1"
},
"resolutions": {
  "@babel/core": "7.0.0-beta.47",
  "babel-core": "^7.0.0-bridge.0"
},

【问题讨论】：

标签： reactjs react-native native jestjs enzyme

【解决方案1】：

所以，看起来 Enzyme 在0.55.4 之后与 RN 配合得不好。此外，Enzyme 不是为 RN 创建的，而是为 React 创建的。 Here's a good thread to follow on the Enzyme repo。如果有人为 RN 创建了一个适配器，它可以工作，但是由于 Airbnb is sunsetting RN for their company，我看不到他们对 repo 进行任何更改。不过，团队中有一位开发人员愿意审查并帮助处理提出的任何 PR。 ??

【讨论】：