I am just getting into js/react testing with Jest. Even though it is supposed to be painless testing it has been a bit painful to me:
In the very beginning of my tests, I used to be able to see each test with a green or red check mark. It was very good visually. Now, I am unable to see the little marks next to the tests and I was wondering if someone could guide to see where in the Jest config I could change this feature.
This is my current display when I run my tests: (no check marks or reference to my specific tests)
Jest only outputs the results of every test when in verbose mode, or when there are tests failing. Try running:
jest --verbose
Alternately you can set the option in jest.config.js.
You can append this in to your package.json file.
"scripts": {
"test": "npx jest --verbose"
}
Then run npm test
If you have created your project using create-react-app ,you can do either one of the following. You can directly add the --verbose to the test script like below
or you can create a file named jest.config.json in the src folder of your project and add the following code
{
"name": "my-project",
"jest": {
"verbose": true
}
}
If that also didnt work. open you package.json file and add the following line in the jest configuration
Related
my project was created with the swdc create-project ...
Is there a documentation, a tutorial or description for the right setup/configuration unit testing with JEST for custom plugin in administration?
This tutorial describes only how to write a test
But i think there must be a official setup documentation because of versions etc.
EDIT: a tutorial with code is now avialable
Using the suggested solution and execute the test, throws an configuration error:
● Test suite failed to run
Configuration error:
Could not locate module src/core/factory/module.factory mapped as:
undefined/src$1.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^src(.*)$/": "undefined/src$1"
},
"resolver": undefined
}
...
Cause of error:
process.env.ADMIN_PATH not setted but required in %Project%/custom/plugins/%MyPlugin%/src/Resources/app/administration/node_modules/#shopware-ag/jest-preset-sw6-admin/jest-preset.js
My solution:
set process.env.ADMIN_PATH in %Project%/custom/plugins/%MyPlugin%/src/Resources/app/administration/jest.config.js
// jest.config.js
...
const { join, resolve } = require('path');
process.env.ADMIN_PATH = resolve('../../../../../../../src/Administration/Resources/app/administration');
...
I think it is easiest to just copy and adapt from a plugin that already has jest tests set up. Look at the administration directory for SwagPayPal for example. Copy the dependency and script sections from their package.json. Also copy the entire jest.config.js. Then within the administration directory of your plugin you should be able to npm install followed by npm run unit or npm run unit-watch and it should find *.spec.js files within the test sub-directory.
Jest's configuration states:
Jest's configuration can be defined in the package.json file of your
project, or through a jest.config.js file or through the --config <path/to/js|json> option.
What happens if a configuration setting is defined in two or more places? Are distinct configuration settings merged together or can they be silently ignored? If merging or ignoring, do they have a well defined or ad hoc precedence?
I inherited multiple projects with both a "jest" object in package.json and "jest.config.js" file, each with their specific configuration.
By playing (superficially) with the coverage threshold (which was < 97%), I came to the conclusion that jest.config.js is used, and the jest object in package.json is ignored. There doesn't seem to be any merging going on.
My tests:
#1: Which has priority ?
package.json: coverage 98%
jest.config.js: coverage 99%
=> "coverage threshold for statements (99%) not met"
Answer: jest.config.js
#2: Are they merged ?
package.json: coverage 98%
jest.config.js: (missing coverage key)
=> no coverage warnings
Answer: No
To answer a subset of the full problem (which may be too complicated for a meaningful set of tests as it's a lot of knobs to twiddle), if a jest command line --config (or -c) is provided, then package.json jest settings are ignored.
More specifically to come to this conclusion, firstly I tried jest -c jest/config.js with setupFilesAfterEnv in my jest/config.js:
module.exports = {
rootDir: '../',
setupFilesAfterEnv: ['./jest/global-setup.js'],
}
File jest/global-setup.js contains:
const Enzyme = require('enzyme')
const Adapter = require('enzyme-adapter-react-16')
require('jest-enzyme/lib/index.js')
Enzyme.configure({ adapter: new Adapter() })
Which here has the desired effect of running the enzyme setup. Commenting it out in the jest/config.js file and putting the equivalent into package.json is skipped/ignored:
"jest": {
"setupFilesAfterEnv": ["./jest/global-setup.js"],
},
Secondly I tried jest -c jest/config.js with a jest fileTransformer.js file and the following in my jest/config.js:
transform: {
'^.+\\.js$': 'babel-jest',
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/jest/file-transformer.js',
},
Then the equivalent jest.transform setting of package.json is skipped/ignored:
"jest": {
"transform": {
"^.+\\.js$": "babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest/file-transformer.js"
}
},
Thirdly, changing my npm scripts test command from jest -c jest/config.js to jest and my package.json to include the following causes the package.json settings to work as expected:
"jest": {
"setupFilesAfterEnv": ["./jest/global-setup.js"],
"transform": {
"^.+\\.js$": "babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/jest/file-transformer.js"
}
},
Tested with jest v24.9.0
Just a quick disclaimer, I cannot reproduce this on another project, which is why I'm here instead of making an issue on the Github.
Issue
So a quick demo project I made to show a co-worker how to use the Vue test utils, went off the wagon. It doesn't get picked up in the transform part of the jest.config.js.
I made the project with the Vue CLI, using vue create demo-project choosing ESlint and Babel, then running vue add #vue/cli-plugin-unit-jest. Everything went fine, I committed, ran the test command and everything went fine.
So we started testing snapshots, and everything was fine. Next day, come back to the project to keep going, and this is the error I get.
> vue-jest#0.1.0 test:unit .../demo-projects/vue-jest
> vue-cli-service test:unit
FAIL tests/unit/example.spec.js
● Test suite failed to run
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.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
.../demo-projects/vue-jest/tests/unit/example.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.163s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
Just running the normal npm run test:unit results in the example.spec.js that comes with the test utils is not babel'ed, and fails in the Node test environment.
Attempted Solutions
Did not work
Deleting node_modules and reinstalling
Deleting package-lock.json, in addition to the above step ( separately done )
Reverting back to the commit when it was working
Checking out to a different branch, deleting all the files that vue add #vue/cli-plugin-unit-jest added, then running the command again to re-create all the files
jest.config.js
tests/ - and all it's files
Worked
Pretty clear what's happening, so in the jest.config.js file, I added the .js file under the transform field.
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.(js|jsx)?$': 'babel-jest' // added .js
},
This solution solves the problem, and properly transforms the example.spec.js
Attempted Recreation
I tried to see if this was a bug by creating another project, running the same steps and it worked just fine. I even copied and pasted all the files from the broken one to the new one, looking for differences in git. It was exactly the same. Which is why I thought it might be node_modules, but it still didn't work.
Uhh
Hopefully this isn't a waste of time for anyone reading since it's not truly a problem. I mainly wanted to have it for anyone who might have the same issue to see that adding the .js extension would solve the problem without having to start over, but also curious if anyone has insight on why this might be happening?
Question
What do I have to do to make WebStorm hit the breakpoint?
Is it necessary to set the %NODE_DEBUG_OPTION%? If yes, how do I do this in combination with vue-cli.service?
Steps to reproduce:
vue create myapp
Set options to:
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Unit
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
Open myapp in WebStorm
Open npm Tool Windows
Set breakpoint in tests/unit/example.spec.js
Rightclick on test:unit->Debug test:unit
console output:
To debug the "test:unit" script, make sure the %NODE_DEBUG_OPTION% string is specified as the first argument for the node command you'd like to debug.
For example:
"scripts": {
"start": "node %NODE_DEBUG_OPTION% server.js"
}
myapp#0.1.0 test:unit C:\Users\c-jay\myapp
vue-cli-service test:unit
PASS tests/unit/example.spec.js
Configuration:
WebStorm 2018.2.4
Vue CLI v3.0.5
According to cli-plugin-jest and npm tasks debug in WebStorm I've edited the npm test:unit call in the scripts-section of my package.json to:
"test:unit": "node %NODE_DEBUG_OPTION% node_modules/#vue/cli-service/bin/vue-cli-service.js test:unit"
And webstorm hits the breakpoints as expected. This is for Windows. On Mac should it be:
"test:unit": "node $NODE_DEBUG_OPTION node_modules/#vue/cli-service/bin/vue-cli-service.js test:unit"
I want use Mocha, power-assert in my TypeScript project, when I use Chai, istanbul could generate Coverage HTML report, when I switch to power-assert, istanbul could only report coverage but cant generate HTML report with same config and exit with error. And if there is an error in test, the mocha will also broke.
It sames a path issue in power-assert.
I use nyc to report the coverage.
My test command:
"test": "mocha --compilers ts:espower-typescript/guess test/*.ts",
"test:coverage": "nyc npm test"
I'v set up a repo to reproduce this problem: https://github.com/LiJinyao/bug-power-assert
Is there anyone have experience to set up a TypeScript test environment with code coverage using power-assert?
I've solved this problem by adding "sourceRoot": "." to my tsconfig.json. according to this issue
The"file not found" error seems to be caused by paths in sourcemaps
that are not absolute.