title: Error setting up Detox on React-Native/Expo mobile app: "ReferenceError: element is not defined"
body: <p>I am trying to set up end-to-end testing with Detox on a React-Native/Expo mobile app. The app and Jest are currently working fine, but Detox tests give ReferenceError's. I have followed the instructions in this link, <a href="https://blog.expo.io/testing-expo-apps-with-detox-and-react-native-testing-library-7fbdbb82ac87" rel="nofollow noreferrer">https://blog.expo.io/testing-expo-apps-with-detox-and-react-native-testing-library-7fbdbb82ac87</a>, as well as the Detox and Jest websites.
  I have run the tests through a jest script (<code>yarn test</code>) and <code>detox test</code>.</p>
  
  <pre><code>$ detox test --loglevel trace
  detox[51199] INFO:  [test.js] configuration="ios.sim" loglevel="trace" artifactsLocation="artifacts/ios.sim.2019-04-26 12-31-53Z" recordLogs="none" takeScreenshots="manual" recordVideos="none" recordPerformance="none" node_modules/.bin/jest --config=e2e/config.json --maxWorkers=1 '--testNamePattern=^((?!:android:).)*$' "e2e"
  ● Validation Warning:
  
    Unknown option "setupFilesAfterEnv" with value ["./init.js"] was found.
    This is probably a typing mistake. Fixing it will remove this message.
  
    Configuration Documentation:
    https://jestjs.io/docs/configuration.html
  
   FAIL  e2e/features/login/index.spec.js
    App
      ✕ should have login screen (272ms)
      ✕ should show hello screen after tap (104ms)
      ✕ should show world screen after tap (105ms)
  
    ● App › should have login screen
  
      ReferenceError: device is not defined
  
        at reloadApp (../node_modules/detox-expo-helpers/index.js:68:3)
  
    ● App › should have login screen
  
      ReferenceError: element is not defined
  ...
  </code></pre>
  
  <p>setupFilesAfterEnv <em>is</em> a jest option.</p>
  
  <p>The downloaded Expo IPA is in the directory bin/Exponent.app.</p>
  
  <p>package.json</p>
  
  <pre><code>{
  ...
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
      "start": "expo start",
      "android": "expo start --android",
      "ios": "expo start --ios",
      "test": "jest --watchAll --notify",
      "lint": "eslint .",
      "ci": "yarn lint &amp;&amp; jest"
    },
    "dependencies": {
      "expo": "^32.0.0",
      "formik": "^1.5.1",
      "invariant": "^2.2.4",
      "prop-types": "^15.7.2",
      "react": "16.5.0",
      "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
      "react-navigation": "^3.3.2",
      "react-redux": "^6.0.1",
      "redux": "^4.0.1",
      "redux-persist": "^5.10.0",
      "redux-thunk": "^2.3.0",
      "reselect": "^4.0.0"
    },
    "devDependencies": {
      "@babel/core": "^7.3.4",
      "babel-eslint": "^10.0.1",
      "babel-plugin-module-resolver": "^3.2.0",
      "babel-preset-expo": "^5.0.0",
      "detox": "^12.4.1",
      "detox-expo-helpers": "^0.6.0",
      "eslint": "^5.15.0",
      "eslint-config-prettier": "^4.1.0",
      "eslint-plugin-prettier": "^3.0.1",
      "eslint-plugin-react": "^7.12.4",
      "expo-detox-hook": "^1.0.10",
      "jest-expo": "^32.0.0",
      "prettier": "^1.16.4",
      "react-native-testing-library": "^1.7.0",
      "react-test-renderer": "^16.8.6",
      "redux-devtools-extension": "^2.13.8",
      "redux-mock-store": "^1.5.3"
    },
    "jest": {
      "preset": "jest-expo",
      "clearMocks": true
    },
    "detox": {
      "test-runner": "jest",
      "runner-config": "e2e/config.json",
      "configurations": {
        "ios.sim": {
          "binaryPath": "bin/Exponent.app",
          "type": "ios.simulator",
          "name": "iPhone XR"
        }
      }
    }
  }
  </code></pre>
  
  <p>The e2e directory is straight from Detox with a few changes for Expo.</p>
  
  <p>e2e/config.json</p>
  
  <pre><code>{
      "setupFilesAfterEnv": ["./init.js"],
      "testEnvironment": "node"
  }
  </code></pre>
  
  <p>e2e/init.js</p>
  
  <pre><code>const detox = require('detox');
  const config = require('../package.json').detox;
  const adapter = require('detox/runners/jest/adapter');
  
  jest.setTimeout(120000);
  jasmine.getEnv().addReporter(adapter);
  
  beforeAll(async () =&gt; {
      await detox.init(config);
  });
  
  beforeEach(async () =&gt; {
      await adapter.beforeEach();
  });
  
  afterAll(async () =&gt; {
      await adapter.afterAll();
      await detox.cleanup();
  });
  </code></pre>
  
  <p>login.spec.js</p>
  
  <pre><code>import { reloadApp } from 'detox-expo-helpers';
  
  describe('App', () =&gt; {
      beforeEach(async () =&gt; {
          await reloadApp();
      });
  
      it('should have login screen', async () =&gt; {
          await expect(element(by.id('login'))).toBeVisible();
      });
  
      it('should show hello screen after tap', async () =&gt; {
          await element(by.id('hello_button')).tap();
          await expect(element(by.text('Hello!!!'))).toBeVisible();
      });
  
      it('should show world screen after tap', async () =&gt; {
          await element(by.id('world_button')).tap();
          await expect(element(by.text('World!!!'))).toBeVisible();
      });
  });
  </code></pre>
  
  <p>On a side note, I don't know why there is the jasmine reference in init.js. I guess it is because JestJS is based on Jasmine. Anyway, it does not seem to be connected with the errors.</p>