title: How do I clean up my React Native/Expo application to work with Jest?
body: <p>I have an existing project that uses React Native and Expo. Currently, the application runs fine. I'm trying to integrate Jest into the project. A basic &quot;true=true&quot; test in jest passes and runs without error. When I try to run any code using ES6 terms, however, the following error occurs:</p>
  <pre><code> FAIL  screens/__tests__/home.test.js
    ● Test suite failed to run
  
      Jest encountered an unexpected token
  
      This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
  
      By default, if Jest sees a Babel config, it will use that to transform your files, ignoring &quot;node_modules&quot;.
  
      Here's what you can do:
       • To have some of your &quot;node_modules&quot; files transformed, you can specify a custom &quot;transformIgnorePatterns&quot; in your config.
       • If you need a custom transformation specify a &quot;transform&quot; option in your config.
       • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the &quot;moduleNameMapper&quot; config option.
  
      You'll find more details and examples of these config options in the docs:
      https://jestjs.io/docs/en/configuration.html
  
      Details:
  
      /Users/user/Documents/GitHub/ReadingRainbow/node_modules/react-native/index.js:13
      import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
      ^^^^^^
  
      SyntaxError: Cannot use import statement outside a module
  
        1 | import React from 'react';
      &gt; 2 | import { Image, View, Text, Button, TouchableOpacity, ScrollView} from 'react-native';
          | ^
        3 | import { globalStyles } from '../styles/global';
        4 | import { useNavigation } from '@react-navigation/native';
        5 | 
  
        at Runtime._execModule (node_modules/jest-expo/node_modules/jest-runtime/build/index.js:1157:58)
        at Object.&lt;anonymous&gt; (screens/home.js:2:1)
        at Object.&lt;anonymous&gt; (screens/__tests__/home.test.js:2:1)
  </code></pre>
  <p>I have also set up a clean, brand new project (following <a href="https://docs.expo.io/" rel="nofollow noreferrer">these</a> directions first and <a href="https://docs.expo.io/guides/testing-with-jest/" rel="nofollow noreferrer">these</a> second) to test the compare the dependencies and such against my current project. The clean project runs as intended, including import/export statements. How do I correct and clean up my real project so that jest runs without error?</p>
  <p>I have tried deleting the node_modules folder and running npm install to reestablish the dependencies. I have also tried adjusting the preset configurations for jest, the transformIgnorePatterns, and the preset defined in babel.config.js. The most helpful explanation I've been given so far is, &quot;[this is probably not working because] node can't use imports (without transpiling) and jest is trying to render using node instead of a browser.&quot; Any help is sincerely appreciated! Please let me know if you need further information or clarification.</p>
  <p>Example file:</p>
  <pre><code>// Intro.js
  import React, {Component} from 'react';
  import {StyleSheet, Text, View} from 'react-native';
  
  const styles = StyleSheet.create({
    container: {
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
      flex: 1,
      justifyContent: 'center',
    },
    instructions: {
      color: '#333333',
      marginBottom: 5,
      textAlign: 'center',
    },
    welcome: {
      fontSize: 20,
      margin: 10,
      textAlign: 'center',
    },
  });
  
  export default class Intro extends Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.welcome}&gt;Welcome to React Native!&lt;/Text&gt;
          &lt;Text style={styles.instructions}&gt;
            This is a React Native snapshot test.
          &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  <p>Example test:</p>
  <pre><code>// __tests__/Intro-test.js
  import React from 'react';
  import renderer from 'react-test-renderer';
  import Intro from './Intro';
  
  test('renders correctly', () =&gt; {
    const tree = renderer.create(&lt;Intro /&gt;).toJSON();
    expect(tree).toMatchSnapshot();
  });
  </code></pre>
  <p>package.json of &quot;clean&quot; project</p>
  <pre><code>{
    &quot;main&quot;: &quot;node_modules/expo/AppEntry.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;expo start&quot;,
      &quot;android&quot;: &quot;expo start --android&quot;,
      &quot;ios&quot;: &quot;expo start --ios&quot;,
      &quot;web&quot;: &quot;expo start --web&quot;,
      &quot;eject&quot;: &quot;expo eject&quot;,
      &quot;test&quot;: &quot;jest&quot;
    },
    &quot;dependencies&quot;: {
      &quot;expo&quot;: &quot;~39.0.2&quot;,
      &quot;expo-status-bar&quot;: &quot;~1.0.2&quot;,
      &quot;react&quot;: &quot;16.13.1&quot;,
      &quot;react-dom&quot;: &quot;16.13.1&quot;,
      &quot;react-native&quot;: &quot;https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz&quot;,
      &quot;react-native-web&quot;: &quot;~0.13.12&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;~7.9.0&quot;,
      &quot;jest-expo&quot;: &quot;^39.0.0&quot;,
      &quot;react-test-renderer&quot;: &quot;^17.0.1&quot;
    },
    &quot;jest&quot;: {
      &quot;preset&quot;: &quot;jest-expo&quot;,
      &quot;transformIgnorePatterns&quot;: [
        &quot;node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)&quot;
      ]
    },
    &quot;private&quot;: true
  }
  </code></pre>
  <p>package.json of my actual project</p>
  <pre><code>{
    &quot;main&quot;: &quot;node_modules/expo/AppEntry.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;expo start&quot;,
      &quot;test&quot;: &quot;jest&quot;,
      &quot;test:update&quot;: &quot;jest --verbose --coverage --updateSnapshot&quot;,
      &quot;test:watch&quot;: &quot;jest --verbose --watch&quot;,
      &quot;android&quot;: &quot;expo start --android&quot;,
      &quot;ios&quot;: &quot;expo start --ios&quot;,
      &quot;web&quot;: &quot;expo start --web&quot;,
      &quot;eject&quot;: &quot;expo eject&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@react-native-community/masked-view&quot;: &quot;0.1.10&quot;,
      &quot;@react-navigation/native&quot;: &quot;^5.8.2&quot;,
      &quot;@react-navigation/stack&quot;: &quot;^5.11.1&quot;,
      &quot;axios&quot;: &quot;^0.20.0&quot;,
      &quot;expo&quot;: &quot;~39.0.2&quot;,
      &quot;expo-status-bar&quot;: &quot;~1.0.2&quot;,
      &quot;react&quot;: &quot;16.13.1&quot;,
      &quot;react-dom&quot;: &quot;16.13.1&quot;,
      &quot;react-native&quot;: &quot;https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz&quot;,
      &quot;react-native-dotenv&quot;: &quot;^2.4.2&quot;,
      &quot;react-native-gesture-handler&quot;: &quot;~1.7.0&quot;,
      &quot;react-native-reanimated&quot;: &quot;~1.13.0&quot;,
      &quot;react-native-safe-area-context&quot;: &quot;3.1.4&quot;,
      &quot;react-native-screens&quot;: &quot;~2.10.1&quot;,
      &quot;react-native-testing-library&quot;: &quot;^6.0.0&quot;,
      &quot;react-native-web&quot;: &quot;~0.13.12&quot;,
      &quot;react-navigation-stack&quot;: &quot;^2.10.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;~7.9.0&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.12.1&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.1.0&quot;,
      &quot;babel-jest&quot;: &quot;^26.6.2&quot;,
      &quot;jest&quot;: &quot;^26.6.2&quot;,
      &quot;jest-expo&quot;: &quot;^39.0.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-navigation&quot;: &quot;^4.4.3&quot;,
      &quot;react-test-renderer&quot;: &quot;^17.0.1&quot;
    },
    &quot;jest&quot;: {
      &quot;preset&quot;: &quot;jest-expo&quot;,
      &quot;transformIgnorePatterns&quot;: [
        &quot;node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)&quot;
      ]
    },
    &quot;private&quot;: true
  }
  </code></pre>
  <p>babel.config.js</p>
  <pre><code>module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
    };
  };
  </code></pre>
  <p>jest.config.json (non-existent in &quot;clean&quot; project)</p>
  <pre><code>{
    &quot;testRegex&quot;: &quot;((\\.|/*.)(test))\\.js?$&quot;
  }
  </code></pre>