How can I add a custom reporter to Jasmine through karma? - karma-jasmine

I'm trying to call jasmine-fail-fast through karma. I have karma-jasmine installed.
[https://www.npmjs.com/package/jasmine-fail-fast][1]
All jasmine custom reporters appear to have a configuration like the one below to add it.
var failFast = require('jasmine-fail-fast');
jasmine.getEnv().addReporter(failFast.init());
The problem is that this does not work in my karma.conf:
module.exports = function(options) {
jasmine.getEnv().addReporter(failFast.init());
config.set({...});
};
The karma.conf file does not give me access to jasmine or window.jasmine through module.exports
The karma config itself can give a require in jasmine-fail-fast for me if I add it as a plugin:
plugins: ['karma-firefox-launcher', 'karma-jasmine', 'jasmine-fail-fast'],
But unfortunately it never calls the init():
jasmine.getEnv().addReporter(failFast.init());
Does anyone know how the hell I can add this reporter to jasmine with karma?
[1]: jasmine-fail-fast Causes Jasmine to stop after failing the first test

Related

Cannot configure Jest for WebStorm/IntelliJ

I have installed Jest using npm :
npm i jest --save-dev
At the package level I also have a Jest config file: jest.config.js which is very simple and just contains :
const config = {
verbose: true,
};
module.exports = config;
However if I look at a test that I wrote, the expect() cannot be compiled :
On closer inspection WebStorm/IntelliJ thinks that describe() and it() belong to mocha, and not jest.
How do I point IntelliJ/WebStorm to jest and not to mocha? I can't seem to find anything in the settings.

How to compile Cypress e2e tests/files using Vite?

By default, Cypress compiles e2e tests with a built-in webpack config, which used to be fine because Vue-CLI also used Webpack; however, now that I've upgraded to Vue 3 and Vite, no webpack.
I have two options:
Revive the old webpack config for my Vue 2 project and update it for Vue 3 just to run Cypress' e2e tests.
Figure out how to tell Cypress to compile the app with Vite and not Webpack
I can't figure out #2, and I don't want to do #1 because having two different compilation methods sounds like a really bad future headache.
So far, I have this for my Cypress config:
import { devServer } from '#cypress/vite-dev-server'
import { defineConfig } from 'cypress'
import * as path from 'path'
export default defineConfig({
chromeWebSecurity: false,
projectId: '5kusbh',
requestTimeout: 10000,
responseTimeout: 60000,
viewportHeight: 1080,
viewportWidth: 1920,
e2e: {
baseUrl: 'http://localhost:8080',
setupNodeEvents (on, config) {
on('dev-server:start', (options) => {
return devServer({
...options,
viteConfig: {
configFile: path.resolve(__dirname, 'vite.config.ts'),
},
})
})
return config
},
specPattern: 'cypress/e2e/**/**.spec.js',
},
})
However, when I run Cypress, I get a webpack compilation error, which is telling me Vite is not compiling the application for Cypress.
Note Otherwise, my application is working great - I just can't run Cypress, and we have hundreds of unit, integration, and e2e tests written in Cypress.
TL;DR; I need help configuring Cypress to use my app's Vite config to compile its e2e tests and run it's dev server.
EDIT:
I removed my config to see how it'd run just hitting localhost, but Cypress must be trying to compile my code, because it's struggling with the Vite env variable syntax, import.meta.env.[insert key name here] in non-Cypress JavaScript files because it's not process.env...
For e2e tests, the execution of tests is separate from running the app and you access the app using cy.visit(). #cypress/vite-dev-server was for running component tests prior to cypress 10. But with cypress-vite you can also compile e2e tests using vite and use the same configuration as your app, so you don't need to config the webpack anymore.

vue-cli-service build: validationError for new workbox-webpack-plugin options

With the following vue.config.js:
module.exports = {
pwa: {
name: 'My App',
...
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/sw.js', //and I use "sw.js" in my registerServiceWorker.js file
skipWaiting: true,
clientsClaim: true,
}
}
}
The validation errors during build are that 'skipWaiting' and 'clientsClaim' are not supported parameters. Why? swSrc is from the same list of options listed here and the build doesn't complain about that option. When I remove these two options, the build works.
So I guess my question is:
skipWaiting, clientsClaim are "not a supported parameter" of what? Of webpack? of the PWA plugin? Of the workbox-webpack plugin? Where can I find the correct set of options? Thanks.
UPDATE: I do not have a .env file setting the NODE-ENV. However npm run build which I guess builds production assets works only if I remove the 2 options. The removed options in dev (npm run serve) yields NO service worker file.
You are using workbox plugin in InjectManifest mode, but pass parameters for GenerateSW.
InjectManifest mode expects an existing service-worker file to be injected and it's path defined in swSrc, while GenerateSW will create service-worker file, thus accepts different set of options (e.g. swDest, etc)
All options for each of modes can be found on the same documentation page of workbox-webpack-plugin you've posted in corresponding sections.

Karma coverage istanbul does not create folder

I am trying to integrate a code coverage reporter to my karma tests.
I set up the following changes in my config:
coverageIstanbulReporter: {
reports: ['html', 'lcovonly', 'text-summary'],
// base output directory. If you include %browser% in the path it will be replaced with the karma browser name
dir: path.join(__dirname, 'coverage'),
// if using webpack and pre-loaders, work around webpack breaking the source path
fixWebpackSourcePaths: true,
},
reporters: config.coverage ? ['kjhtml', 'dots', 'coverage-istanbul'] : ['kjhtml', 'dots'],
But unfortnetly, it does not create a coverage folder.
Here is my full karma.config.js
What am I doing wrong here? Note, that I am calling karma start ./karma.conf.js --coverage and even checked without the config coverage parameter.
Given you have text-summary outputs on Chrome console and you already have the base directory for the reporter specified, you just need to explicitly tell the reporter which sub directory should be used for different report type:
Try to add this entry under coverageIstanbulReporter (from repo's README):
// Most reporters accept additional config options. You can pass these through the `report-config` option
'report-config': {
// all options available at: https://github.com/istanbuljs/istanbul-reports/blob/590e6b0089f67b723a1fdf57bc7ccc080ff189d7/lib/html/index.js#L135-L137
html: {
// outputs the report in ./coverage/html
subdir: 'html'
}
}

Automatically run webdriver for e2e test in Gulp

There is the following protractor.conf.js:
exports.config = {
framework: 'jasmine',
specs: ['e2e-tests/**/*.js'],
seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.47.1.jar'
}
Gulp task:
gulp.task('e2e-testing', ['webdriver_standalone'], function() {
gulp.src([]).pipe(protractor({ configFile: "protractor.conf.js" }))
.on('error', function(e) { throw e })
});
This code works good, but I must execute webdriver-manager start --standalone before starting e2e task. How can I omit it? How can I do it automatically? Thanks in advance
Just remove seleniumAddress config option in order to make Protractor instantiate a new server by itself when you start a test suite. Otherwise, if server address is specified, Protractor tries to connect to it rather then create a new one. Take a look at the section Starting the Server from a Test Script in the docs:
Please note that if you set seleniumAddress, the settings for
seleniumServerJar, seleniumPort, seleniumArgs, sauceUser and sauceKey
will be ignored.
Yes, we need to add the below in config.js
seleniumServerJar: 'path of jar file',
seleniumPort: '4444',
and remove seleniumAddress from the config file.
It works absolutely fine