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.
Related
I am trying to compile my vue component to unit test it.
I added the import { render } from "#vue/server-test-utils"; line at the beginning of my test file. I also run the command npm i --save-dev #vue/server-test-utils which completed successfully. I checked the node_modules folder that the dependency was indeed installed.
But still when I run the test file I am getting the error:
WEBPACK Failed to compile with 1 error(s)
Error in ./node_modules/#vue/server-test-utils/dist/vue-server-test-utils.js
Module not found: 'vue-server-renderer'
Here I found a similar issue. I tried adding the
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.isServerBuild = false;
return options;
});
}
to my webpack config, but it did not help.
I am using Vue 2. Maybe someone happened to stumble across this issue and knows a solution?
npm install --save-dev vue-server-renderer #vue/server-test-utils worked.
It seems that we have to install the two packages: the vue-server-renderer and then the #vue/server-test-utils.
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.
I've currently managed to implement Cucumber BDD tests within a Vitejs + Vue 3 as follows:
I start and run the development server with:
$ yarn dev
And then in a separate window I run the Cypress test runner:
$ yarn cy:run
Which corresponds to:
...,
"scripts": {
...
"cy:run": "cypress run -q",
...
},
...
In my package.json. The output of this, is 1 test passing.
So far, so good. I then came across the #cypress/vite-dev-server package, and implemented it with the cucumber preprocessor inside /cypress/plugins/index.ts as follows:
/// <reference types="cypress" />
const path = require('path')
const { startDevServer } = require('#cypress/vite-dev-server')
const browserify = require('#cypress/browserify-preprocessor')
const cucumber = require('cypress-cucumber-preprocessor').default
/**
* #type {Cypress.PluginConfig}
*/
module.exports = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
on('dev-server:start', options => {
return startDevServer({
options,
viteConfig: {
configFile: path.resolve(__dirname, '..', '..', 'vite.config.ts')
}
})
})
const cucumberOptions = {
...browserify.defaultOptions,
typescript: require.resolve('typescript')
}
on('file:preprocessor', cucumber(cucumberOptions))
return config
}
So, it looks like the #cypress/vite-dev-server package doesn't accept what I am trying to do with Cypress & Cucumber.
Has anyone managed to get Cypress & Cucumber BDD working with Vite in a seamless fashion?
I've also looked at the wait-on module, running the following:
yarn dev & wait-on http://localhost:8099
But it doesn't seem to be waiting, only the Vite server runs? So I can't then run the cypress command I need ...
The #cypress/vite-dev-server is for component testing, not e2e testing. The cypress-cucumber-preprocessor on the other hand is for compiling e2e specs.
In e2e testing, the app runs independently from tests, so you can use vite for running the dev server, but it has nothing to do with tests. If you want to use vite config for compiling tests you can use cypress-vite instead of cypress-cucumber-preprocessor.
Im trying to write my first test in Jest and cannot make my configuration run with a Vue Component.
In my Laravel Project I installed the needed npm packages with following commands:
npm install -—save-dev jest vue-jest jest-serializer-vue
npm install #vue/test-utils
In my package.json i have following configurations:
"scripts": {
...
"test" : "jest"
}
...
"jest": {
"testRegex": "tests/Javascript/.*.spec.js$"
},
My test is in the given Directory "root/tests/Javascript/Mytest.spec.js".
My test looks like this:
import { mount } from '#vue/test-utils';
// If this is removed it works....
import MyVuePage from './../../resources/js/pages/MyVuePage.vue';
describe('Something', () => {
it("Awesome", () => {
expect(1).toBe(1);
});
});
I get following Error:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with >the "moduleNameMapper" config option.
In the Console there is a little Arrow Pointing on my "i" of "import SeriesVersion from './../../resources/js/pages/MyVuePage.vue';"
I run the test by writing "npm run test" into the console.
Can you tell me what im doing wrong?
The Jest documentation suggests using npm test to execute tests.
Is there a way of watching your source and tests to rerun Jest tests automatically when relevant files have been changed?
Thanks to Erin Stanfill for pointing out, Jest already has support for automatically re-running. The better configuration for package.json would be
{
"scripts": {
"test": "jest"
}
}
To turn on the watch mode, just use
$ npm run test -- --watch
Or
$ yarn run test --watch
If you have npm test configured, you can just run npm test -- --watch.
As a complement suggestion you can add "--watchAll"
into your package.json file like this:
"scripts": {
"test": "jest --watchAll"
},
Each time you run npm test, the watch mode will be enable by default.
For more info npm CLI docs
Start you tests in watch mode.
jest --watch fileName.test.js
As per documentation
Run tests that match this spec name (match against the name in describe or test, basically).
jest -t name-of-spec
// or in watch mode
jest --watch -t="TestName"
This example shows how to use gulp to run your Jest tests using jest-cli, as well as a tdd gulp task to watch files and rerun Jest tests when a file changes:
var gulp = require('gulp');
var jest = require('jest-cli');
var jestConfig = {
rootDir: 'source'
};
gulp.task('test', function(done) {
jest.runCLI({ config : jestConfig }, ".", function() {
done();
});
});
gulp.task('tdd', function(done) {
gulp.watch([ jestConfig.rootDir + "/**/*.js" ], [ 'test' ]);
});
gulp.task('default', function() {
// place code for your default task here
});
install a couple of Grunt packages:
npm install grunt-contrib-watch grunt-exec --save-dev
make a Gruntfile.js with the following:
module.exports = function(grunt) {
grunt.initConfig({
exec: {
jest: 'node node_modules/jest-cli/bin/jest'
},
watch: {
files: ['**/*.js'],
tasks: ['exec:jest']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-exec');
}
then simply run:
grunt watch
If you want to run a single file in watch mode:
yarn run test --watch FileName.test.jsx
I personally use the npm package jest-watch-typeahead.
You need to do 3 steps:
Install npm packege:
npm install --save-dev jest jest-watch-typeahead
Add to jest.config.js next code:
module.exports = {
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
};
Run Jest in watch mode
yarn jest --watch