title: Errors when using Enzyme with React Native (import glyphmap)
body: <p>I'm trying to set up Enzyme testing for my React Native project. I've been getting various errors in various scenarios.</p>
  
  <h2>Scenario 1</h2>
  
  <p>When I try to set up a test for one of my components, I get this error:</p>
  
  <pre><code>    /Users/TuzMacbookPro2017/Development/QMG-local/APPS/ELECTRO/node_modules/@expo/vector-icons/Zocial.js:1
      ({"Object.&lt;anonymous&gt;":function(module,exports,require,__dirname,__filename,global,jest){import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Zocial.json';
                                                                                                      ^^^^^^^^
      SyntaxError: Unexpected identifier
  </code></pre>
  
  <p>Some relevant files</p>
  
  <h3>test file</h3>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import renderer from "react-test-renderer";
  import { mount, ReactWrapper } from "enzyme";
  import LoginView from "../src/screens/LoginView";
  
  describe("LoginView", () =&gt; {
    const wrapper = mount(&lt;LoginView /&gt;);
  
    it("can get through the damn test file", () =&gt; {
      expect(true).toBe(true);
    });
  });
  </code></pre>
  
  <h3>jest.config.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    setupFilesAfterEnv: ["&lt;rootDir&gt;setup-tests.js"],
    transformIgnorePatterns: [
      "node_modules/(?!(jest-)?react-native|@react-native-community|react-native-elements)"
    ],
    preset: "react-native"
  };
  </code></pre>
  
  <h3>babel.config.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = function(api) {
    api.cache(true);
  
    return {
      presets: ["babel-preset-expo"]
    };
  };
  </code></pre>
  
  <h3>package.json</h3>
  
  <pre class="lang-js prettyprint-override"><code>{
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
      "start": "expo start",
      "android": "expo start --android",
      "ios": "expo start --ios",
      "eject": "expo eject",
      "test": "node ./node_modules/jest/bin/jest.js --watchAll --bail",
      "testff": "node ./node_modules/jest/bin/jest.js --watchAll --bail"
    },
    "jest": {
      "preset": "jest-expo",
      "testEnvironment": "node",
      "globals": {
        "__DEV__": true
      }
    },
    "dependencies": {
      "@expo/samples": "2.1.1",
      "@react-native-community/async-storage": "^1.3.4",
      "axios": "^0.18.0",
      "expo": "^32.0.0",
      "flow-bin": "^0.98.1",
      "native-base": "^2.12.1",
      "pluralize": "^7.0.0",
      "react": "16.5.0",
      "react-dom": "^16.8.6",
      "react-native": "0.57",
      "react-native-elements": "^1.1.0",
      "react-native-geocoding": "^0.3.0",
      "react-native-global-font": "^1.0.2",
      "react-native-indicators": "^0.13.0",
      "react-native-keyboard-aware-scrollview": "^2.0.0",
      "react-native-material-dropdown": "^0.11.1",
      "react-native-render-html": "^4.1.2",
      "react-native-uuid": "^1.4.9",
      "react-navigation": "^3.9.1",
      "react-redux": "^6.0.1",
      "redux": "^4.0.1",
      "redux-saga": "^1.0.2",
      "redux-test-utils": "^0.3.0",
      "redux-thunk": "^2.3.0",
      "sugar": "^2.0.6"
    },
    "devDependencies": {
      "@babel/core": "^7.4.5",
      "@babel/polyfill": "^7.4.4",
      "@babel/preset-env": "^7.4.5",
      "@babel/preset-react": "^7.0.0",
      "axios-mock-adapter": "^1.16.0",
      "babel-core": "^6.26.3",
      "babel-eslint": "^10.0.1",
      "babel-jest": "^24.8.0",
      "babel-preset-expo": "^5.0.0",
      "babel-preset-react-native": "^4.0.1",
      "enzyme": "^3.9.0",
      "enzyme-adapter-react-16": "^1.12.1",
      "fetch-mock": "^7.3.3",
      "jest": "^24.8.0",
      "jest-enzyme": "^7.0.2",
      "jest-expo": "^32.0.0",
      "jsdom": "^14.1.0",
      "mock-async-storage": "^2.1.0",
      "prettier-eslint": "^8.8.2",
      "react-test-renderer": "^16.8.6",
      "redux-mock-store": "^1.5.3",
      "redux-saga-tester": "^1.0.460"
    },
    "private": true,
    "rnpm": {
      "assets": [
        "./assets/fonts"
      ]
    }
  }
  </code></pre>
  
  <h3>setup.tests.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>import Adapter from "enzyme-adapter-react-16";
  import { configure } from "enzyme";
  import jsdom from "jsdom";
  
  import "react-native";
  import "jest-enzyme";
  
  function setUpDomEnvironment() {
    const { JSDOM } = jsdom;
    const dom = new JSDOM("&lt;!doctype html&gt;&lt;html&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;", {
      url: "http://localhost/"
    });
    const { window } = dom;
  
    global.window = window;
    global.document = window.document;
    global.navigator = {
      userAgent: "node.js"
    };
    copyProps(window, global);
  }
  
  function copyProps(src, target) {
    const props = Object.getOwnPropertyNames(src)
      .filter(prop =&gt; typeof target[prop] === "undefined")
      .map(prop =&gt; Object.getOwnPropertyDescriptor(src, prop));
    Object.defineProperties(target, props);
  }
  
  setUpDomEnvironment();
  
  configure({ adapter: new Adapter() });
  </code></pre>
  
  <h3>imports from the component under test</h3>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import {
    Image,
    Input,
    Button,
    ThemeProvider,
    Overlay
  } from "react-native-elements";
  import { View, Text, Picker } from "react-native";
  import { DotIndicator } from "react-native-indicators";
  import { connect } from "react-redux";
  import { login, assignUser } from "../redux/actions/authActions";
  import F8StyleSheet from "../components/F8StyleSheet";
  import { Dropdown } from "react-native-material-dropdown";
  import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scrollview";
  import User from "../models/User";
  import uuid from "react-native-uuid";
  </code></pre>
  
  <h2>Scenario 2</h2>
  
  <p>So that's a problem, but then something else interesting happens. When I swap out my <code>LoginView</code> for a super simple component, the test runs, but brings up some new errors that cast some suspicion on my rendering setup.</p>
  
  <h3>SimpleView.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import { Text, View } from "react-native";
  
  export default (SimpleView = ({ params }) =&gt; (
    &lt;View&gt;
      &lt;Text&gt;SimpleView&lt;/Text&gt;
    &lt;/View&gt;
  ));
  </code></pre>
  
  <h3>test</h3>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import renderer from "react-test-renderer";
  import { mount, ReactWrapper } from "enzyme";
  import SimpleView from "./__mocks__/SimpleView";
  
  describe("LoginView", () =&gt; {
    const wrapper = mount(&lt;SimpleView /&gt;);
  
    it("can get through the damn test file", () =&gt; {
      expect(true).toBe(true);
    });
  });
  </code></pre>
  
  <h3>errors</h3>
  
  <pre class="lang-js prettyprint-override"><code> PASS  tests/LoginView.test.js (6.058s)
    LoginView
      ✓ can get through the damn test file (4ms)
  
    console.error node_modules/react-dom/cjs/react-dom.development.js:506
      Warning: &lt;Text /&gt; is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
          in Text (created by Component)
          in Component (created by SimpleView)
          in View (created by Component)
          in Component (created by SimpleView)
          in SimpleView (created by WrapperComponent)
          in WrapperComponent
  
    console.error node_modules/react-dom/cjs/react-dom.development.js:506
      Warning: The tag &lt;Text&gt; is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
          in Text (created by Component)
          in Component (created by SimpleView)
          in View (created by Component)
          in Component (created by SimpleView)
          in SimpleView (created by WrapperComponent)
          in WrapperComponent
  
    console.error node_modules/react-dom/cjs/react-dom.development.js:506
      Warning: &lt;View /&gt; is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
          in View (created by Component)
          in Component (created by SimpleView)
          in SimpleView (created by WrapperComponent)
          in WrapperComponent
  
    console.error node_modules/react-dom/cjs/react-dom.development.js:506
      Warning: The tag &lt;View&gt; is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
          in View (created by Component)
          in Component (created by SimpleView)
          in SimpleView (created by WrapperComponent)
          in WrapperComponent
  </code></pre>