Using cucumber reporters with the protractor-cucumber-framework - protractor

As far as I understand, the protractor-cucumber-framework passes through the cucumberOpts object to cucumber, which allows the user to specify cucumber options like strict and tags. I'm trying to use a TeamCity reporter with this framework. According to the instructions for the reporters, (e.g. TeamCity Reporter, to use this reporter you use the --format option to specify the reporter when running cucumber. So my interpretation is that I should specify the format property in the cucumberOpts object in the same way. i.e. cucumber -f TeamCityFormatter::Formatter becomes:
cucumberOpts: {
'format': 'TeamCityFormatter::Formatter'
}
But when I do this, I get the error:
Unhandled rejection Error: ENOENT: no such file or directory, open 'C:\Dev\fork\Billing.Test.Automation.V2\:Formatter':
I thought maybe I just need to specify the name of the module, so I tried:
cucumberOpts: {
'format': 'TeamCityFormatter'
}
Which gave me this error:
Unhandled rejection Error: Cannot find module 'C:\Dev\fork\Billing.Test.Automation.V2\TeamCityFormatter'
So that looks like it is looking for a module, so I tried pointing it to the module in the node_modules folder:
cucumberOpts: {
'format': 'node_modules/teamcity-formatter'
}
And I get this error:
Unhandled rejection TypeError: this.registerHandler is not a function
Is there some special way to use a cucumber reporter via the protractor-cucumber-framework?

Not an answer but an example of how a package can be imported as a plugin
onPrepare:fucntion(){
...
},
// Here the magic happens
plugins: [{
package: 'protractor-multiple-cucumber-html-reporter-plugin',
options: {
automaticallyGenerateReport: true,
removeExistingJsonReportFile: true,
displayDuration: true
}
}],

Related

How to add Babel support for nullishCoalescingOperator to vue project?

In my Vue-CLI project, when I tried using the ?? operator, I got this error:
Syntax Error: SyntaxError: /Users/stevebennett/odev/freelancing/v-map/src/components/Map.vue: >Support for the experimental syntax 'nullishCoalescingOperator' isn't currently enabled (30:29):
...
Add #babel/plugin-proposal-nullish-coalescing-operator (https://git.io/vb4Se) to the 'plugins' section of your Babel config to enable transformation.
I installed #babel/plugin-syntax-nullish-coalescing-operator (its name seems to have changed), added it to my babel.config.js:
module.exports = {
presets: ['#vue/app'],
plugins: ['#babel/plugin-syntax-nullish-coalescing-operator'],
};
Now the error message seems to have gone backwards, no reference to the operator name at all:
Module parse failed: Unexpected token (39:35)
You may need an appropriate loader to handle this file type.
| case 8:
| points = _context.sent;
console.log(sheetID ?? 37);
What am I doing wrong?
For me, the #babel/plugin-syntax-nullish-coalescing-operator plugin would not work, which is the one you are using.
I had to use the #babel/plugin-proposal-nullish-coalescing-operator plugin which is the one that the error message suggests you use.
Additionally, I noticed this on the page for the #babel/plugin-syntax-nullish-coalescing-operator plugin:
I can't say for sure if this will fix your problem, but it certainly fixed mine

Why does Babel throw Unknown option: ... Children?

Trying to run build on CircleCi and it's failing on test. Same stuff is working perfect on my local.
My .babelrc config:
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": [
"transform-class-properties",
"react-hot-loader/babel",
["babel-plugin-transform-builtin-extend", {
"globals": ["Error", "Array"]
}],
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
]
}
Error I'm getting from circleCI:
yarn test v0.27.5
$ jest
FAIL src/utils/service-helper.test.js
● Test suite failed to run
ReferenceError: [BABEL] /home/circleci/repo/src/utils/service-helper.test.js: Unknown option: /home/circleci/repo/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
Any idea what is going on as the same configuration is working on another project
The error is unhelpful, but the issue is that your config has react in the preset list, but it can't find the babel-preset-react module in your node_modules, so instead it is loading the react module itself as if it were a preset. But since the "react" module isn't a preset, Babel throws.
Most likely, you've forgotten to list babel-preset-react in your package.json.

How can I use my webpack's html-loader imports in Jest tests?

I am just getting started with the Jest test framework and while straight up unit tests work fine, I am having massive issues testing any component that in its module (ES module via babel+webpack) requires a HTML file.
Here is an example:
import './errorHandler.scss';
import template from './errorHandler.tmpl';
class ErrorHandler {
...
I am loading the component specific SCSS file which I have set in Jest's package.json config to return an empty object but when Jest tries to run the import template from './errorHandler.tmpl'; line it breaks saying:
/Users/jannis/Sites/my-app/src/scripts/errorHandler/errorHandler.tmpl.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<div class="overlay--top">
^
SyntaxError: Unexpected token <
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)
My Jest config from package.json is as follows:
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
"moduleDirectories": ["node_modules"],
"moduleFileExtensions": ["js", "json", "html", "scss"],
"moduleNameMapper": {
"^.+\\.scss$": "<rootDir>/test/styleMock.js"
}
}
It seems that the webpack html-loader is not working correctly with Jest but I can't find any solution on how to fix this.
Does anyone know how I can make these html-loader imports work in my tests? They load my lodash template markup and i'd rather not have these at times massive HTML chunks in my .js file so i can omit the import template from x part.
PS: This is not a react project, just plain webpack, babel, es6.
I encountered this specific problem recently and creating your own transform preprocesser will solve it. This was my set up:
package.json
"jest": {
"moduleFileExtensions": [
"js",
"html"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js"
}
}
NOTE: babel-jest is normally included by default, but if you specify a custom transform preprocessor, you seem to have to include it manually.
test/utils/htmlLoader.js:
const htmlLoader = require('html-loader');
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src);
}
}
A bit late to the party, but wanted to add that there is also this html-loader-jest npm package out there to do this if you wanted to go that route.
Once you npm install it you will add it to your jest configuration with
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html?$": "html-loader-jest"
}
For Jest > 28.x.x with html-loader:
Create a custom transformer as documented here.
jest/html-loader.js
const htmlLoader = require("html-loader");
module.exports = {
process(sourceText) {
return {
code: `module.exports = ${htmlLoader(sourceText)};`,
};
},
};
Add it to your jest config.
jest.config.js
...
// A map from regular expressions to paths to transformers
transform: {
"^.+\\.html$": "<rootDir>/jest/html-loader.js",
},
...
It will fix the error : Invalid return value: process() or/and processAsync() method of code transformer found at "<PATH>" should return an object or a Promise resolving to an object.
Maybe your own preprocessor file will be the solution:
ScriptPreprocessor
Custom-preprocessors
scriptpreprocessor: The path to a module that provides a synchronous function from pre-processing source files. For example, if you wanted to be able to use a new language feature in your modules or tests that isn't yet supported by node (like, for example, ES6 classes), you might plug in one of many transpilers that compile ES6 to ES5 here.
I created my own preprocessor when I had a problems with my tests after added transform-decorators-legacy to my webpack module loaders.
html-loader-jest doesn't work for me. My workaround for this:
"transform": {
'\\.(html)$': '<rootDir>/htmlTemplateMock.html'
}
htmlTemplateMock.html is empty file
For Jest 28+ you can use jest-html-loader to make Jest work with code that requires HTML files.
npm install --save-dev jest-html-loader
In your jest config, add it as a transformer for .HTML files:
"transform": {
"^.+\\.html?$": "jest-html-loader"
},

Ignore "cannot find module" error on typescript

Can the Typescript compiler ignore the cannot find module 'x' error on import expressions such as:
//How to tell the compiler that this module does exists
import sql = require('sql');
There are multiple npm libraries such as node sql that doesn't have existing typings
Is there a way to tell the compiler to ignore this error other than creating a new definition file with the declare module x ... ?
As of TypeScript 2.6 (released on Oct 31, 2017), now there is a way to ignore all errors from a specific line using // #ts-ignore comments before the target line.
The mendtioned documentation is succinct enough, but to recap:
// #ts-ignore
const s : string = false
disables error reporting for this line.
However, this should only be used as a last resort when fixing the error or using hacks like (x as any) is much more trouble than losing all type checking for a line.
As for specifying certain errors, the current (mid-2018) state is discussed here, in Design Meeting Notes (2/16/2018) and further comments, which is basically
"no conclusion yet"
and strong opposition to introducing this fine tuning.
If you just want to bypass the compiler, you can create a .d.ts file for that module, for instance, you could create a sql.d.ts file and inside have this:
declare module "sql" {
let _sql: any;
export = _sql;
}
Solved This
By default #ts-check looks for definitions of a module, either its your own code or external libraries.
Since we are not using ES6 style modules, then we must we are using
commonjs, check my jsconfig.json file for help.
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"lib": ["es5", "es6", "es7"]
},
"include": ["src/**/*"],
"exclude": ["node_modules"],
"typeAcquisition": { "enable": true }
}

Error: Missing either an "out" or "dir" config value with r.js / grunt-requirejs

Below is my build configuration file: build.js
{
appDir: '../src',
baseUrl: 'libs',
paths: {
app: 'js'
},
dir: '../prod',
out:"../js/main-built.js",
fileExclusionRegExp: /.less$/,
optimize: "uglify2",
optimizeCss: "standard",
modules: [{
name: '../js/main'
}]
}
I am using "grunt-requirejs": "~0.4.2" as my build npm and Gruntfile requirejs configuration + r.js 2.1.16:
requirejs: {
std: {
options: grunt.file.read('config/build.js')
}
}
Whenever i am try to execute grunt requirejs it is throwing below error on my console:
Error: Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".
at Function.build.createConfig (d:\app\node_modules\grunt-requirejs\node_modules\requirejs\bin\r.js:27717:19)
I want to consolidate some of the JS files like jquery and its plugins etc. into 1 file and i am using AMD pattern similar to project https://github.com/hegdeashwin/Protocore
Can you please help me out here and tell what i have missed in my configuration ?
Thanks & Regards
You're using grunt.file.read which reads a file and returns the file's content as a string.
Use grunt.file.readJSON instead.