酶未渲染組件名稱

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效果0.55.4 。 而且，不是為RN創建酶，而只是為React創建的。 這是遵循酶庫的一個很好的思路 。 如果有人為RN創建適配器，則可以使用，但是由於Airbnb不再為其公司提供RN，因此我看不到他們會對存儲庫進行任何更改。 但是，團隊中有一位開發人員願意審查並幫助您完成所提出的任何PR。 👍🏼