I have configured mocha to run testcases in my react app via mocha intelliJ mocha plugin , i have defined the configuration as below :
I have helper Javascript file which is suppose to be loaded by mocha before test hence i added --config in mocha option in above screenshot and the content of that file is below :
--recursive
--require helper.js
Issue is it seems like this helper is not loading hence i am getting errors like :
ReferenceError: regeneratorRuntime is not defined
windows is not defined
where in the windows is defined in helper.js hence my issue is how to load helper.js from mocha run configuration present in intelliJ
Alternative to this when i run below command in terminal this works fine and hence runs all test cases in terminal for mocha :
mocha --require babel-register --require ignore-styles --require ./test/test.helper.js
but i want to run single test from intelliJ only hence any pointers to this issue is greatly appreciated .
The right way to pass mocha.opts to mocha is --opts option, like --opts config/mocha.opts (path has to be relative to project root folder). The path to the local module in mocha.opts should also be relative to the project root.
For example, if my helper is located in <project dir>/specs/util/test.helper.js, and mocha.opts - in <project dir>/config/mocha.opts, .opts would be
--require ./specs/util/test.helper.js
and run configuration would look as follows:
Related
I created a new Vue project via npm init vue#latest. I used the Vue CLI before and want to get into Vite now. Inside my Github action I used the Vue CLI service commands before but now I'm looking for the equivalent commands using Vite.
Check that the code style is fine (no errors, no warnings)
Inside my workflow I previously used the command
npm run lint -- --no-fix --max-warnings=0
Based on the lint script command
eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore
I added the lint:ci script command
eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --max-warnings 0 --ignore-path .gitignore
Check that unit tests are passing
Inside my workflow I previously used the command
npm run test:unit
Based on the test:unit script command
vitest --environment jsdom
I added the test:unit:ci script command
vitest --environment jsdom --run
Check that e2e tests are passing
Inside my workflow I previously used the command
npm run test:e2e -- --headless
There already is a test:e2e:ci script command and based on the Cypress docs I think I have to use it this way (which worked for me)
- name: Check if e2e tests are passing
uses: cypress-io/github-action#v2
with:
build: npm run build
start: npm run test:e2e:ci
Do you have any better solutions? I'm not sure if this is the most elegant way or if Vue/Vite already provide some commands I don't know about yet.
Thanks in advance!
I have run the command
yarn add -D jest to install jest to my project.
This does successfully add jest to my node_modules
> find . -name jest
./node_modules/.bin/jest
./node_modules/jest
When I use iterm2 to run jest however I get the following output
> jest
zsh: command not found: jest
FWIW When I use the IntelliJ terminal it does work
> jest
Determining test suites to run...^C
What am I missing in the iterm environment to be able to have node_modules bin in my classpath depending on the current repo?
An OS shell doesn't know about your locally installed node_modules, but IntelliJ terminal does. So if you want to run jest from outside of an IDE you should perform several additional steps.
The most common way to run locally installed packages is to define a separate script in the "scripts" section of your package.json file. Then you will be able to run it using the yarn/npm itself from any terminal. You can find an exact example in the Yarn docs.
{
"name": "my-package",
"scripts": {
"test": "jest"
}
}
yarn run test
Or you could install jest globally so it will be accessible from anywhere, but it's not a best practice.
I work on a vue.js app, which is tested with jest. To debug those tests I used this command node --inspect-brk node_modules/.bin/jest --runInBand --config test/jest.config.js and everything worked fine in chrome dev tools.
Later we introduced some environmental variables to the project to set some values using dotenv (variables can be accessed through process.env), tests also run fine, but when the debugger is attached, environmental variable values are not read from .env file.
How to run/debug jest tests in chrome dev tools on a vue.js project that uses environmental variables described in .env file, accessed through process.env?
Exporting .env file contents helped. Ran such command export $((cat .env ; cat .test.env)| grep -v "^#" | xargs) && node --inspect-brk node_modules/.bin/jest --runInBand --config test/jest.config.js, the exported .env variables got saved and on later runs it was enough to run just the test launching script node --inspect-brk node_modules/.bin/jest --runInBand --config test/jest.config.js
I've used Vue for some time now, but I'm just getting started with the CLI and I got a bit confused.
I installed #vue/cli and if I type vue in the command line, I get:
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
create [options] <app-name> create a new project powered by vue-cli-service
add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project
invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
serve [options] [entry] serve a .js or .vue file in development mode with zero config
build [options] [entry] build a .js or .vue file in production mode with zero config
ui [options] start and open the vue-cli ui
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires #vue/cli-init)
config [options] [value] inspect and modify the config
upgrade [semverLevel] upgrade vue cli service / plugins (default semverLevel: minor)
info print debugging information about your environment
Run vue <command> --help for detailed usage of given command.
I created a project with vue and I needed to install #vue/cli-service-global for some reason that I can't remember.
After that, however, I noticed:
'vue-cli-service' is not recognized as an internal or external command
And that's because I had to install #vue/cli-service. Now, when I type vue-cli-service in the command line, I get:
Usage: vue-cli-service <command> [options]
Commands:
serve start development server
build build for production
inspect inspect internal webpack config
run vue-cli-service help [command] for usage of a specific command.
Apparently, I can build, serve, and inspect with both CLI tools. My question is - what's the difference between them? Both the readme of #vue/cli and #vue/cli-service have nothing but a link to this page where no answer is given to that question.
What can I do with one that I can't do with the other? Do I need both?
#vue/cli-service-global is a package that allows you to run vue serve and vue build without any local dependencies.
#vue/cli-service is a package that actually doing those vue serve and vue build, both #vue/cli-service-global and #vue/cli depend on it.
If you're using #vue/cli then you don't need to install another two independently, since it already has #vue/cli-service in its dependencies.
Added: Just to be sure, I'll explain it more:
#vue/cli:
add, create, config, ui and other commands
build and serve commands through #vue/cli-service-global package
inspect command through #vue/cli-service package (local dependency)
#vue/cli-service-global:
build, inspect and serve commands through #vue/cli-service package
#vue/cli-service:
build, inspect and serve commands
So, you need to install #vue/cli only and remove other two.
Added: Clarification about using vue-cli-service:
When you create a project using vue create command, #vue/cli makes a link to vue-cli-service binary inside ./node_modules/.bin of created project.
Then you can use it like this:
Access it directly as vue-cli-service inside npm scripts (package.json):
"scripts": {
"watch": "vue-cli-service build --watch"
}
Access it from the shell: ./node_modules/.bin/vue-cli-service build --watch.
You can even add ./node_modules/.bin to you shell PATH and access it from the shell directly as vue-cli-service.
I'm running Mocha tests for React in Webstorm's terminal window using the following NPM start command:
"tsc && mocha --compilers js:babel-core/register --require ./test_helper.js \"test/**/*.#(js|jsx)\" --watch --watch-extensions js,jsx,tsx"
How do I create a Webstorm Mocha configuration so that I can run tests in Webstorm's test window?
Thanks.
Add a configuration for Mocha:
Run -> Edit Configurations -> Press "+" -> Select "Mocha".
Fields of the form:
Node interpreter: your_node_executable_path
Working directory: root_path_of_your_app
Mocha package: mocha_path (normally within your node_modules folder).
Test directory: root_path_of_your_app \test
By default Mocha looks the tests inside test folder and there, it tries to run test.js.
All the Mocha commands (--compilers, --require, etc) can be included in mocha.opts. Mocha tries to read this file in \test\mocha.opts.
mocha.opts requires one command per line.