React native 在React Native/Expo移动应用程序上设置排毒时出错：“；ReferenceError:未定义元素"；

我正在尝试在React Native/Expo移动应用程序上设置端到端测试和解毒功能。应用程序和Jest目前运行良好，但解毒测试给出了ReferenceError。我遵循了这个链接中的说明，以及解毒和玩笑网站。 我已经通过一个jest脚本（

纱线测试

）和

解毒测试

运行了测试

$ 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
...

SetupFileAfterEnv是一个jest选项

下载的Expo IPA位于bin/Exponent.app目录中

package.json

{
...
  "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 && 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"
      }
    }
  }
}

e2e目录是直接从排毒与世博会的一些变化

e2e/config.json

{
    "setupFilesAfterEnv": ["./init.js"],
    "testEnvironment": "node"
}

e2e/init.js

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 () => {
    await detox.init(config);
});

beforeEach(async () => {
    await adapter.beforeEach();
});

afterAll(async () => {
    await adapter.afterAll();
    await detox.cleanup();
});

login.spec.js

import { reloadApp } from 'detox-expo-helpers';

describe('App', () => {
    beforeEach(async () => {
        await reloadApp();
    });

    it('should have login screen', async () => {
        await expect(element(by.id('login'))).toBeVisible();
    });

    it('should show hello screen after tap', async () => {
        await element(by.id('hello_button')).tap();
        await expect(element(by.text('Hello!!!'))).toBeVisible();
    });

    it('should show world screen after tap', async () => {
        await element(by.id('world_button')).tap();
        await expect(element(by.text('World!!!'))).toBeVisible();
    });
});

另一方面，我不知道init.js中为什么会有jasmine引用。我猜这是因为JestJS是基于Jasmine的。无论如何，它似乎与错误无关。

Summary 对这个问题有一个明确的解释。我引述

当我添加以下内容时，需要：

问题解决了。 为了做到这一点，我不得不把排毒作为一种依赖。这是package.json

{
...
  "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 && 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"
      }
    }
  }
}

详情

安装必需依赖项 其中包括。添加并运行

npm安装

{
  "devDependencies": {
    "detox": "^9.0.6",
    "detox-expo-helpers": "^0.6.0",
    "expo-detox-hook": "^1.0.10",
    "mocha": "^3.5.0"
  },
  "detox": {
    "configurations": {
      "ios.sim": {
        "binaryPath": "bin/Exponent.app",
        "type": "ios.simulator",
        "name": "iPhone 7"
      }
    }
  }
}

如上所述，除了在

expo

中有所不同之外，您应该遵循每个步骤

解毒博览会帮助程序

包括模拟器的官方配置

它还包括一个

您的第二个测试失败，因为

Detox

在页面上找不到该元素。 您需要将

testID

道具传递给具有值

'hello_button'

的组件

it('should show hello screen after tap', async () => {
    await element(by.id('hello_button')).tap();
    await expect(element(by.text('Hello!!!'))).toBeVisible();
});

by.id

将匹配通过

testID

prop提供给视图的id

您的组件应该如下所示

<TouchableOpacity testID={'hello_button'}>

添加了

expo detox hooks

，阅读了所有文档，并用我的配置对它们进行了双重检查，转储并重新加载了node_模块，但我得到了完全相同的错误。@PaulB不幸的是，我不知道如何解决这个问题。你有没有试过别的东西，或者有更新给我？谢谢我所做的一切都起到了作用。如果您对如何排除故障有任何建议，我将很高兴听到。@PaulB我找到了解决您问题的方法。您需要按照此请求的说明进行操作。您提到的PR肯定针对问题的根源，但不幸的是，它只会导致新的错误。我会继续接受答案，并希望有人（比我聪明）能让公关工作。

it('should show hello screen after tap', async () => {
    await element(by.id('hello_button')).tap();
    await expect(element(by.text('Hello!!!'))).toBeVisible();
});

<TouchableOpacity testID={'hello_button'}>