酶未渲染组件名称

Question

I have a React Native application that I've recently upgraded to 0.56.0 . I can build the app in Xcode with no problems, but I'm having testing issues. It seems that Enzyme is not rendering my component's names. This is happening across all of my components, so I think it is configuration, but can't figure it out.

My question is, "What am I missing? Is it configuration somewhere?"

Component

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

Test

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

Debug Message from Test Above

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

As you can see, the Component s should be a wrapping <View> and then a child <Text> but I can't seem to figure out why it's not.

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 config

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

Dependencies

"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

So, looks like Enzyme just doesn't play well with RN after 0.55.4 . Also, Enzyme wasn't created for RN, just React. Here's a good thread to follow on the Enzyme repo . If someone creates an adapter for RN, it could work, but since Airbnb is sunsetting RN for their company , I don't see them making any changes to the repo. Though, there is a dev that was on the team that is willing to review and help with any PRs that are put up. 👍🏼