我有一个带有Nrwl Nx工作区的Angular项目。对于我的e2e测试，我将cypress与typescript一起使用。对于此测试，我希望启用带有Gherkin语法的功能文件支持。
我在项目中添加了“ cypress-cucumber-preprocessor”。当我用js编写绑定时，此设置工作正常。但是，一旦我尝试设置打字稿的步骤，就会出现错误，并且无法正常工作。
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());
};
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
}
}
此设置存在以下错误：
SyntaxError：“导入”和“导出”可能仅与“ sourceType：模块”一起出现
答案 0 :(得分：1)
我找到了BalázsTápai撰写的文章：I'm in a Pickle - Configuring Gherkin with NX Workspaces。出于某种原因，它并不完整，但确实很有帮助。
经过几个小时的流汗和哭泣，我可以得到一个很好的例子。阅读文章，然后执行以下步骤：
npm i -D cypress-cucumber-preprocessor
请注意，tsify不是必需的。
在nx项目的根目录下，添加一个名为cypress-cucumber-preprocessor.config.js的文件。cypress-cucumber-preprocessor中的package.json属性是多余的，应该删除（如果存在）。
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"
}
};
在e2e项目的文件夹integration中：
simple.feature Feature: Simple test
Simple test feature
@focus
Scenario: I always pass
Given I pass
Then I see "the expected text"
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');
});
cypress.json看起来像这样：{
"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}"
}
plugins/index.js 这部分与文章中的部分稍有不同。
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 }]
});
}
我尝试使用@cypress/code-coverage，但是它不起作用。所以我从解决方案中删除了它。
本文介绍了如何为企业主添加html报告。它很直观（如果您为dev chalk和cucumber-html-reporter安装），因此这里没有复制。