ReferenceError: before is not defined (mocha/protractor)

Question

我在 react 应用程序中使用 protractor 和 mocha。尝试使用 before() 或 after() 函数时出现错误：

ReferenceError: before is not defined

但是使用 beforeEach() 或 afterEach() 效果非常好。

我是这样配置的protractor.conf.js

exports.config = {
  capabilities: {
    browserName: 'chrome'
  },
  frameworks: ['mocha', 'chai'],
  onPrepare: function() {
    browser.ignoreSynchronization = true;
  }
};

PS。完整错误：

Stacktrace:
    ReferenceError: before is not defined
    at [object Object].<anonymous> (/myApp/tests/e2e/routes.js:10:5)
    at normalLoader (/myApp/node_modules/babel-core/lib/babel/api/register/node.js:160:5)
    at Object.require.extensions.(anonymous function) [as .js] (/myApp/node_modules/babel-core/lib/babel/api/register/node.js:173:7)
    at require (module.js:380:17)
    at Function.promise (/myApp/node_modules/protractor/node_modules/q/q.js:650:9)
    at _fulfilled (/myApp/node_modules/protractor/node_modules/q/q.js:797:54)
    at self.promiseDispatch.done (/myApp/node_modules/protractor/node_modules/q/q.js:826:30)
    at Promise.promise.promiseDispatch (/myApp/node_modules/protractor/node_modules/q/q.js:759:13)
    at /myApp/node_modules/protractor/node_modules/q/q.js:525:49
    at flush (/myApp/node_modules/protractor/node_modules/q/q.js:108:17)
    at process._tickCallback (node.js:419:13)

Answer 1

我能够通过将 framework: jasmine2 添加到 protractor.conf.js 而不是 before() 和 after() 我写 beforeAll() 和 afterAll() . 现在它就像一个魅力。

有关该问题的详细信息可以在@juliemr

的 gitHub comment 中找到

编辑：打字错误

Answer 2

对于所有想继续使用 Mocha 的人，将量角器配置从

更改为

frameworks: ['mocha', 'chai'],

到

framework: 'mocha',

它帮助我修复了错误"ReferenceError: before is not defined"

Answer 3

这个问题可能已经死了，不过我会在这里为那些想知道的人提供更多信息。接受的答案似乎与最初的问题混淆，所以我们应该做一些让我们回到正轨的小旅程。

接受的答案有什么问题？

正如@Tomas Dermisek 所建议的，这应该只是使用 mocha 作为框架的问题。似乎@Max 已经决定使用 jasmine 而不是 mocha，这实际上是 mocha 的替代测试规范。这似乎就是为什么@Max 需要使用 jasmines beforeAll() 和 afterAll() 而不是 mocha 中所需的 before() 和 after()。

在 protractor.conf.js

的 framework 中添加 jasmine2 可以进一步证明使用 jasmine

在我们继续之前，jasmine 和 mocha 之间有一些需要注意的地方

由于阅读本文的人可能已经尝试过 jasmine 方法，因为 "it's easier"，那么您可能正在使用 jasmine 开箱即用的 jasmine expect。如果您现在正在考虑实际使用 mocha，那么值得了解一些引起我注意的细微差别。

似乎像 element(by.css('app-root h1')).getText() 这样的量角器交互会 return 一个承诺。 @cnishina 今天向我指出，量角器用 angular/jasminewd 包裹 Jasmine，这就是为什么 jasmine 似乎开箱即用的原因。这意味着在 jasmine expect(element(by.css('app-root h1')).getText()).toEqual('Car search POC'); 中可以完美地工作。如果你尝试在 mocha 中做同样的事情，那么它会因为 TypeError 和许多其他难以理解的错误而失败
你需要 chai 和 chai-as-promised 的一点帮助
- chai 会给你 expect 和其他你想要的语法糖果
- chai-as-promised 用 .eventually 丰富了你的糖果，所以你不需要在你的测试中做 then() 承诺解决方案
- 在撰写本文时，最新的 chai-as-promised 依赖项不适用于 chai。无论如何都没有像承诺的那样（对不起，我无法抗拒）。这些是我在工作 package.json

package.json片段

"devDependencies": {
  ...
  "chai": "~3.5.0",
  "chai-as-promised": "~5.3.0",
  "protractor": "~5.1.0",
  ...
}

下面的配置应该能让你起步

protractor.conf.js

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

exports.config = {
  allScriptsTimeout: 11000, // Timeout of each script
  specs: [
    './e2e/**/*.e2e-spec.ts'  // pattern for your tests
  ],
  baseUrl: 'http://localhost:4200/', // URL of your SUT
  capabilities: { 
    'browserName': 'chrome' // name of the browser you want to test in
  },
  directConnect: true, // No need to run selenium server for chrome and firefox
  framework: 'mocha', // The framework we want to use instead of say jasmine
  mochaOpts: { // Some reasonable mocha config
    reporter: "spec",
    slow: 3000,
    ui: 'bdd',
    timeout: 30000
  },
  beforeLaunch: function() { // If you're using type script then you need compiler options
    require('ts-node').register({
      project: 'tsconfig.e2e.json'
    });
  },
  onPrepare: function() { // making chai available globally. in your test use `const expect = global['chai'].expect;`
    var chai = require('chai');
    var chaiAsPromised = require("chai-as-promised");
    chai.use(chaiAsPromised);
    global.chai = chai;
  }
};

tsconfig.e2e.json

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016"
    ],
    "outDir": "../dist/out-tsc-e2e",
    "module": "commonjs",
    "target": "es6",
    "types":[
      "mocha",
      "chai",
      "node"
    ]
  }
}

现在我们已经完成了管道和解释，让我们进入正题并回答 OP 并演示之前的工作

示例规范文件可能类似于下面的规范，并会给出此输出

  search page
I do something in a before!
    √ will display its title

还值得注意的是规范中使用的 const expect = global['chai'].expect;

e2e/sample.e2e-spec.js

import { browser, element, by } from 'protractor';
import {SearchPage} from './search.po';
const expect = global['chai'].expect;

describe('search page', () => {
  let page: SearchPage;

  before(() => {
    console.log('I do something in a before!');
  });


  beforeEach(() => {
    page = new SearchPage();
  });

  it('will display its title', () => {
    page.navigateTo();

    const title = element(by.css('app-root h1')).getText();
    expect(title).to.eventually.contain('A cool title');
  });
});

Answer 4

对于遇到相同错误的其他人，请检查您的 ui 配置。如果它设置为 tdd before 不受支持 - 你的测试将抛出一个异常，说明 before is not defined。相反，您需要使用 suiteSetup.

ReferenceError: before is not defined (mocha/protractor)