Error: No provider for "framework:pact" - npm

I am trying to use pactJS and to generate pacts.
I am using karma / jasmine to run my tests..
Below is my package.json
{
"name": "andriod-pact",
"version": "1.0.0",
"description": "This is a microservice that is one of the two consumers of
the provider microservice",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"jasmine": "^2.6.0",
"karma": "^1.7.0",
"karma-phantomjs-launcher": "^1.0.4",
"pact": "^2.6.0"
}
}
And this is my karma.conf file
// Karma configuration
// Generated on Tue Jul 25 2017 15:32:06 GMT+0200 (W. Europe Daylight Time)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'pact'],
// list of files / patterns to load in the browser
files: [
'../../dist/pact-web.js',
'src/test/js/*.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS_without_security'],
customLaunchers: {
PhantomJS_without_security: {
base: 'PhantomJS',
flags: ['--web-security=no']
}
},
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
But when I run my tests using karma start karma.conf
I get this error
Error: No provider for "framework:pact"! (Resolving: framework:pact)
at error (C:\PactDemoMaster\PactDemoAndroidApp\node_modules\di\lib\injector.js:22:12)
at Object.parent.get (C:\PactDemoMaster\PactDemoAndroidApp\node_modules\di\lib\injector.js:9:13)
at get (C:\PactDemoMaster\PactDemoAndroidApp\node_modules\di\lib\injector.js:54:19)
at C:\PactDemoMaster\PactDemoAndroidApp\node_modules\karma\lib\server.js:143:20
at Array.forEach (native)
at Server._start (C:\PactDemoMaster\PactDemoAndroidApp\node_modules\karma\lib\server.js:142:21)
at invoke (C:\PactDemoMaster\PactDemoAndroidApp\node_modules\di\lib\injector.js:75:15)
at Server.start (C:\PactDemoMaster\PactDemoAndroidApp\node_modules\karma\lib\server.js:103:18)
at Object.exports.run (C:\PactDemoMaster\PactDemoAndroidApp\node_modules\karma\lib\cli.js:280:26)
at requireCliAndRun (C:\Users\aajai_000\AppData\Roaming\npm\node_modules\karma-cli\bin\karma:44:16)
at C:\Users\aajai_000\AppData\Roaming\npm\node_modules\karma-cli\bin\karma:54:12
at C:\Users\aajai_000\AppData\Roaming\npm\node_modules\karma-cli\node_modules\resolve\lib\async.js:45:21
at ondir (C:\Users\aajai_000\AppData\Roaming\npm\node_modules\karma-cli\node_modules\resolve\lib\async.js:196:27)
at C:\Users\aajai_000\AppData\Roaming\npm\node_modules\karma-cli\node_modules\resolve\lib\async.js:163:39
at onex (C:\Users\aajai_000\AppData\Roaming\npm\node_modules\karma-cli\node_modules\resolve\lib\async.js:104:32)
at C:\Users\aajai_000\AppData\Roaming\npm\node_modules\karma-cli\node_modules\resolve\lib\async.js:24:24
If someone can point me to the obvious problem...
Regards

You're missing the karma-pact plugin, it does not come by default with the standard pact dependency.
See https://github.com/pact-foundation/karma-pact.

Related

How can I prevent flaky tests when Cypress testing elements with "v-b-toggle" in a Bitbucket pipeline?

We have a Vue2-based frontend application which uses v-b-toggle to expand/collapse elements on when clicked. When running Cypress tests (either component or e2e tests) locally (CLI and UI), we have not seen the elements fail to expand or collapse. However when running on our Bitbucket pipelines, they will occasionally fail. Has anybody had this issue, and come across a solution?
We can't reproduce this locally, and it only happens intermittently in our pipeline. We've resorted to skipping most of these tests.
I believe this Github issue shows the same behaviour: https://github.com/cypress-io/cypress/issues/7810
More details:
Versions in package.json
"bootstrap-vue": "^2.21.2"
"cypress": "^10.4.0",
"vue": "^2.6.12",
Scripts used for UI and CLI (pipeline) testing:
"test:e2e:ui": "TZ=Etc/UTC cypress open --e2e --browser=electron",
"test:e2e": "TZ=Etc/UTC cypress run --e2e --browser=electron",
"test:component:ui": "TZ=Etc/UTC cypress open --component --browser=electron",
"test:component": "TZ=Etc/UTC cypress run --component --browser=electron"
cypress.config.js:
const { defineConfig } = require("cypress");
module.exports = defineConfig({
env: {
local_url: "http://localhost:8080/",
},
video: false,
screenshotOnRunFailure: true,
defaultCommandTimeout: 8000,
chromeWebSecurity: false, // Disabled to prevent errors with iframes. Would need to reenable if checking for CORS errors in the future.
e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents(on, config) {
return require("./cypress/plugins/index.js")(on, config);
},
experimentalSessionAndOrigin: true,
baseUrl: "http://localhost:8080",
},
component: {
setupNodeEvents(on, config) {},
specPattern: "src/**/*spec.{js,jsx,ts,tsx}",
devServer: {
framework: "vue-cli",
bundler: "webpack",
},
},
});
Happy to provide more information if required.

How to workaround the "Unexpected Token Operator (>)" error when packaging a React app?

I am having some problems building the distributable package for a React app.
I'm trying to execute the following sentence:
rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --config ./config/webpack/prod.js
And receiving this error:
ERROR in a86e50ffd4893c44fdfd.app.js from UglifyJs Unexpected token:
operator (>) [a86e50ffd4893c44fdfd.app.js:10679,43]
The line indicated in that trace corresponds to one of the libraries being loaded as dependencies, and not to the actual code of my app. This is the line itself (line 10679 corresponds to the declaration of the const method with the arrow function):
const DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES = '';
/* unused harmony export DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES */
const getAllColumnLabels = (columnLabels) => {
const columnNames = [];
columnLabels.forEach((value) => {
columnNames.push(value.label);
});
return columnNames;
};
At first I thought it could be related to Babel config, but it is identical to another project which is building correctly. The content of my .babelrc file is shown below, loaded using babel-preset-env:
{
"presets": [
[
"env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true
}
]
]
}
An additional test to rule out some possibilities has been done using the default presets for Babel, though no success was achieved with this test.
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
The settings in tsconfig.json could also be of interest, so i'm showing them here even though they also are identical to the ones in this another project mentioned above, which builds correctly:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"jsx": "react",
"noLib": false,
"allowJs": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
},
"compileOnSave": true,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
I've tried to delete node_modules and re-install the dependencies, also played setting uglify to false in the env for Babelrc, but surprisingly (at least, to me!) it didnt help.
There is a thread in the webpack-contrib Github site which is marked as closed but I didnt find anything that helped me.
Any ideas? I have some experience with npm but this issue certainly is blocking me.
Thanks!
Updating webpack to version 4 (currently 4.17) solved the problem. A few other dependencies needed to be updated to work properly with webpack 4, most importantly the Extract Text Webpack Plugin hasn't at this moment a stable release that works with webpack4, but the 4.0.0-beta works around the issue and may be used until a better replacement is found.

PhantomJS 2.1.1 Error

I can't run my test with karma and phantomJS because of this error:
PhantomJS 2.1.1 (Windows 7.0.0) ERROR
SyntaxError: Use of reserved word 'class'
Here is my config karma.conf.js:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('karma-phantomjs-launcher'),
require('#angular/cli/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['#angular/cli']
},
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: false,
browsers: ['PhantomJS'],
singleRun: true
});
};
I updated angular to v5 and it's happening since then... I read to use karma webpack preprocessor but I'm not using webpack and why was it running before ? No clue.
Thanks a lot if you have a tips or a response :)
I am also facing the same problem after upgrading the angular8 to angular9.
After up-gradation to angular9 when I am trying to run ng test with PhantomJS it is showing
PhantomJS 2.1.1 (Windows 8.0.0) ERROR
SyntaxError: Unexpected token ')'
but if I am trying with ng test --browsers=Chrome --codeCoverage=true it is working fine.
It runs fine with all ES6 keywords, syntax etc.,
PhantomJS requires polyfills so install core-js, and import it before importing zone.
import 'core-js/es6';

How to build everything into a dist with folder structure by webpack?

I am a java developer for years and just new to the js world. This question sounds stupid but I don't know what's the proper/best way to build a dist for reactjs app for deploying to production(nginx/apache).
From my understanding, the dist just like simple web app and should looks like
contains:
index.html
client.js (bundled js after compiled)
static files, e.g.
images, css, js libraries, etc
I follow the guide on:
https://github.com/learncodeacademy/react-js-tutorials/tree/master/1-basic-react
and have a simple web app(maybe this is not called web app) running by:
npm run dev
it uses webpack to bundles the client.js.min and deploy to a embedded web server by node(maybe i am wrong).
Question:
How to build all the things by a command, say "npm run build" and it should built everything in a folder called "dist". So I can deploy it to web server root by copying every in dist to the web root.
package.json
{
"name": "react-tutorials",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : false,
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
In your scripts dictionary of package.json add the following
"build" : "NODE_ENV='production' && node_modules/.bin/webpack -p"
This will tell webpack to read the config file and build it in production mode i.e minify etc etc. The -p flag does it. The node env is to ensure that production build are used for react and other libraries and to set an env variable of production for NODE_Env
To run type. npm run build

I'm trying to use Karma + Mocha for the first time

I'm trying to use Karma + Mocha for the first time.
The main condition is to run the unit tests in a Docker container without any GUI. I don't have any browser, and my only choice is to use PhantomJS.
I have configured all necessary plugins, configs etc., but I received the following error:
ReferenceError: Can't find variable: exports
Before the test run, I built the JavaScript source code with Babel to the 'build' directory and then started Karma from there.
What could be causing this problem?
Here is my karma.conf.js:
// Karma configuration
// Generated on Mon Apr 25 2016 13:04:28 GMT+0300 (RTZ 2 (зима))
const path = require('path');
const webpack = require('webpack');
module.exports = function(config) {
var confBuilder = require('./webpack.config');
confBuilder.module.loaders.push({
test: /\.jsx$/,
loader: 'isparta',
include: path.resolve('src'),
});
confBuilder.devtool = 'inline-source-map';
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'chai'/*'jasmine' /*, 'requirejs'*/],
// list of files / patterns to load in the browser
files: [
{pattern: 'build/utils/*.js', load: false}
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'tests.webpack.js': ['webpack', 'sourcemap'],
'build/utils/*.js': ['babel']
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha', 'coverage', 'jenkins'],
plugins: [
require('karma-webpack'),
require('karma-mocha'),
require('karma-chai'),
require('karma-mocha-reporter'),
require('karma-jenkins-reporter'),
require('karma-chrome-launcher'),
require('karma-sourcemap-loader'),
require('karma-coverage'),
require('karma-phantomjs-launcher'),
require('karma-requirejs'),
require('karma-babel-preprocessor')
],
webpack: confBuilder,
webpackServer: {
noInfo: true,
},
coverageReporter: {
check: {
global: {
statements: 86,
branches: 80,
functions: 95,
lines: 40,
},
},
},
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
autoWatch: true,
})
}