Gunakan file .feature di cypress dengan nrwl nx

Saya memiliki proyek Angular dengan ruang kerja Nrwl Nx. Untuk tes e2e saya, saya menggunakan cypress dengan TypeScript. Untuk tes ini saya ingin mengaktifkan dukungan untuk file Fitur dengan Sintaks Gherkin.

Saya menambahkan "preprocessor-mentimun-cemara" ke proyek. Pengaturan ini berfungsi dengan baik ketika saya menulis binding dengan js. Namun begitu saya mencoba menyiapkan langkah-langkah untuk skrip ketikan, saya mendapatkan kesalahan dan tidak dapat membuatnya berfungsi.

Pengaturan untuk js:

const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // Code Coverage
  on('task', require('@cypress/code-coverage/task'));

  // Preprocess Typescript
  on('file:preprocessor', preprocessTypescript(config));

  // Gherkin support
  on('file:preprocessor', cucumber());
};

Pengaturan untuk ts:

const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;
const browserify = require('@cypress/browserify-preprocessor');

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // Code Coverage
  on('task', require('@cypress/code-coverage/task'));

  // Preprocess Typescript
  on('file:preprocessor', preprocessTypescript(config));

  // Gherkin support
  const options = browserify.defaultOptions;
  options.browserifyOptions.plugin.unshift(['tsify']);
  on('file:preprocessor', cucumber());
};

{
  "name": "client-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "nx": "nx",
    "start": "ng serve",
    "start:browser": "ng serve -o --port 54055",
    "build": "ng build",
    "build:ssr": "ng run client-app:server:production",
    "test": "ng test",
    "lint": "nx workspace-lint && ng lint",
    "e2e": "ng e2e",
    "e2e:watch": "ng e2e --watch",
    "e2e:headless": "ng e2e --prod --headless",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "update": "ng update @nrwl/workspace",
    "update:check": "ng update",
    "workspace-schematic": "nx workspace-schematic",
    "dep-graph": "nx dep-graph",
    "help": "nx help",
    "extract:clientApp": "ngx-translate-extract --input ./apps/client-app/src --output ./apps/client-app/src/assets/i18n/de.json ./apps/client-app/src/assets/i18n/en.json ./apps/client-app/src/assets/i18n/fr.json ./apps/client-app/src/assets/i18n/it.json --clean --sort",
    "extract:clientAppe2e": "ngx-translate-extract --input ./apps/client-app/src --output ./apps/client-app-e2e/src/fixtures/i18n/de.json ./apps/client-app-e2e/src/fixtures/i18n/en.json ./apps/client-app-e2e/src/fixtures/i18n/fr.json ./apps/client-app-e2e/src/fixtures/i18n/it.json --clean --sort"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.1.1",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/forms": "^8.0.0",
    "@angular/material": "^8.1.1",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/platform-server": "^8.1.3",
    "@angular/pwa": "^0.801.2",
    "@angular/router": "^8.0.0",
    "@angular/service-worker": "^8.0.0",
    "@aspnet/signalr": "1.0.3",
    "@ngrx/effects": "^8.2.0",
    "@ngrx/entity": "^8.2.0",
    "@ngrx/router-store": "^8.2.0",
    "@ngrx/store": "^8.2.0",
    "@nguniversal/module-map-ngfactory-loader": "^8.1.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nrwl/angular": "8.4.0",
    "@types/file-saver": "^2.0.1",
    "applicationinsights-js": "^1.0.20",
    "aspnet-prerendering": "^3.0.1",
    "core-js": "^2.5.4",
    "file-saver": "^2.0.2",
    "hammerjs": "^2.0.8",
    "ngx-infinite-scroll": "^7.2.0",
    "rxjs": "~6.4.0",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.1",
    "@angular/cli": "8.1.1",
    "@angular/compiler-cli": "^8.0.0",
    "@angular/language-service": "^8.0.0",
    "@biesbjerg/ngx-translate-extract": "^2.3.4",
    "@cypress/code-coverage": "^1.8.0",
    "@ngrx/store-devtools": "^8.2.0",
    "@nrwl/cypress": "8.4.0",
    "@nrwl/jest": "8.4.0",
    "@nrwl/linter": "^8.4.1",
    "@nrwl/workspace": "8.4.0",
    "@types/applicationinsights-js": "^1.0.9",
    "@types/cypress-cucumber-preprocessor": "^1.12.0",
    "@types/jest": "24.0.9",
    "@types/node": "^12.6.8",
    "codelyzer": "~5.0.1",
    "cypress": "3.4.0",
    "cypress-cucumber-preprocessor": "^1.16.0",
    "dotenv": "6.2.0",
    "istanbul-lib-coverage": "^2.0.5",
    "jest": "24.1.0",
    "jest-preset-angular": "7.0.0",
    "ngrx-store-freeze": "^0.2.4",
    "nyc": "^14.1.1",
    "prettier": "1.16.4",
    "ts-jest": "24.0.0",
    "ts-node": "~7.0.0",
    "tsify": "^4.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.4.5"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  }
}

Saya mengalami kesalahan berikut dengan pengaturan ini:

SyntaxError: 'import' dan 'ekspor' hanya dapat muncul dengan 'sourceType: module'


typescript nrwl-nx cypress cucumber
person Alex Wissmann    schedule 14.10.2019    source sumber
comment
Saya kira Anda memiliki babel versi lama - coba dengan npm install babel-preset-es2017 --save-dev   -  person Prany    schedule 14.10.2019
comment
Saya belum menginstal babel sama sekali di proyek saya. Plugin cypress tidak memerlukannya jika saya mengikuti pedoman.   -  person Alex Wissmann    schedule 15.10.2019
comment
Itu diinstal dengan cypress, periksa di folder \node_modules   -  person Prany    schedule 15.10.2019
comment
Saya mencobanya tetapi tidak berhasil.   -  person Alex Wissmann    schedule 15.10.2019
comment
oke sesuai dengan praprosesor mentimun resmi untuk skrip ketikan mereka meminta agar tsify - npm install tsify (github.com/TheBrainFamily/)   -  person Prany    schedule 15.10.2019
comment
Saya menambahkan package.json saya. Saya telah menginstal tsify. Saya mengikuti instruksi pengaturan lengkap. Saya kira masalahnya adalah saya menggunakan preprocessTypescript Nrwl   -  person Alex Wissmann    schedule 15.10.2019
comment
Salah satu solusi termudah adalah dengan mengkloning/mengunduh repo pengujian resmi dan melakukan perubahan di dalamnya. Berikut tautannya github.com/TheBrainFamily/   -  person Prany    schedule 15.10.2019
comment
Terima kasih atas tipnya. Saya akan mencobanya   -  person Alex Wissmann    schedule 21.10.2019

Jawaban (1)


arrow_upward
4
arrow_downward

Saya menemukan artikel yang ditulis oleh Balázs Tápai: Saya sedang dalam Pickle - Mengonfigurasi Gherkin dengan NX Workspaces. Untuk beberapa alasan, itu tidak sepenuhnya lengkap tetapi sangat membantu.

Setelah beberapa jam berkeringat dan menangis, saya bisa mendapatkan contoh berlari. Baca artikelnya lalu ikuti langkah-langkah berikut:

Siapkan Gherkin

Tambahkan paket npm

npm i -D cypress-cucumber-preprocessor

Harap dicatat bahwa tsify tidak diperlukan.

Tambahkan file konfigurasi

Di root proyek nx, tambahkan file bernama cypress-cucumber-preprocessor.config.js Properti cypress-cucumber-preprocessor di package.json berlebihan dan harus dihapus jika ada.

const path = require("path");

const stepDefinitionsPath = path.resolve(process.cwd(), "./src/integration");
const outputFolder = path.resolve(process.cwd(), "../../cyreport/cucumber-json");

module.exports = {
  nonGlobalStepDefinitions: true,
  stepDefinitions: stepDefinitionsPath,
  commonPath: stepDefinitionsPath, // I added this line, not sure if necessary
  cucumberJson: {
    generate: true,
    outputFolder: outputFolder,
    filePrefix: "",
    fileSuffix: ".cucumber"
  }
};

Tulis tesnya

Di folder integration proyek e2e Anda:

Tambahkan simple.feature

Feature: Simple test

  Simple test feature

@focus
Scenario: I always pass
Given I pass
Then I see "the expected text"

Tambahkan simple.test.ts

import { assert } from 'console';
import { Given, Then } from 'cypress-cucumber-preprocessor/steps';

Given(/I pass/, () => {
  console.log('Congrats!');
});

Then('I see {string}', (text: string) => {
  console.log(text === 'the expected text');
});

Acar yang sudah diproses sebelumnya

Verifikasi bahwa cypress.json terlihat seperti ini:

{
  "fileServerFolder": ".",
  "fixturesFolder": "./src/fixtures",
  "integrationFolder": "./src/integration",
  "modifyObstructiveCode": false,
  "pluginsFile": "./src/plugins/index",
  "supportFile": "./src/support/index.ts",
  "video": true,
  "videosFolder": "../../dist/cypress/apps/sandbox-e2e/videos",
  "screenshotsFolder": "../../dist/cypress/apps/sandbox-e2e/screenshots",
  "chromeWebSecurity": false,
  "testFiles": "**/*.{feature,features}"
}

Tulis ulang plugins/index.js

Bagian ini sedikit berbeda dengan yang ada di artikel.

const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
module.exports = (on, config) => {
  on('file:preprocessor', preprocessTypescript(config, customizeWebpackConfig));
  return config;
}

function customizeWebpackConfig(webPackConfig) {
  webPackConfig.node = {
    fs: "empty",
    child_process: "empty",
    readline: "empty",
  };

  pushFeature(webPackConfig);
  pushFeatures(webPackConfig);

  return webPackConfig;
}

function pushFeature(webPackConfig) {
  pushModuleRule(webPackConfig, /\.feature$/, 'cypress-cucumber-preprocessor/loader');
}

function pushFeatures(webPackConfig) {
  pushModuleRule(webPackConfig, /\.features$/, 'cypress-cucumber-preprocessor/lib/featuresLoader');
}

function pushModuleRule(webPackConfig, testRegex, loaderLib) {
  webPackConfig.module.rules.push({
   test: testRegex,
   use: [{ loader: loaderLib }]
  });
}

Cakupan kode? Wartawan HTML!

Saya mencoba menggunakan @cypress/code-coverage tetapi tidak berhasil. Jadi saya menghapusnya dari solusi.

Artikel ini menjelaskan cara menambahkan laporan html untuk Pemilik Bisnis. Ini lurus ke depan (jika Anda menginstal untuk dev chalk dan cucumber-html-reporter) sehingga tidak disalin di sini.

person Francois Stock    schedule 06.11.2020