酶未渲染组件名称

Question

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

我的问题是，“我想念什么？它在某处配置吗？”

组件

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>

如您所见，Component应该是包装纸<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"
},

Answer 1

因此，看来0.55.4之后，酶在RN上不能很好地发挥作用。而且，不是为RN创建酶，而只是为React创建的。 Here's a good thread to follow on the Enzyme repo。如果有人为RN创建适配器，则可以使用，但是自Airbnb is sunsetting RN for their company起，我看不到他们会对存储库进行任何更改。但是，团队中有一位开发人员愿意审查并帮助您完成所提出的任何PR。