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
Related
I built an application with Angular CLI 9.
I patched the package.json file with :
{
"scripts": {
"build:prod": "ng build --prod --subresource-integrity",
"prebuild:prod": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' ts-node ./sitemap_generator.ts"
}
}
So, when I called npm run build:prod, my 2 commands are executed and output files generated by compiler contains SRI.
Now, I added the appShell :
npm run ng generate appShell -- --client-project my-project
To run the build with the appShell, I have to use the command :
npm run ng run my-project:app-shell:production
MAIN QUESTION
But this command calls my-project:build:production configuration of angular.json file, and this does not accept the --subresource-integrity argument :/
How to patch this to have appShell production build with SRI ?
SECONDARY QUESTION for the braves
This appShell build create a server/ folder in dist/. It just contains a main.js file. I suppose it's internally used with Node to build the appShell ; can someone confirm that ?
And so, can I use Unversal too with this architecture to do some SSR for search engines ?
Thanks !
Ok, I found a way by editing angular.json :
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "my-project",
"projects": {
"oce-training": {
"architect": {
"build": {
"configurations": {
"production": {
"subresourceIntegrity": true,
}
}
}
}
}
}
}
So, we cannot override on package.json or by CLI command, but it's sufficient for my case.
Now I have in package.json:
{
"scripts": {
"build:prod": "ng run oce-training:app-shell:production",
"prebuild:prod": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' ts-node ./sitemap_generator.ts"
},
}
My question about SSR is maintained, but it could be another Stackoverflow post ;)
I'm using sanity.io as a headless CMS and am trying to unit test some of my code. Sanity internally uses babel to pre-compile the source code.
For my unit tests I am using mocha and am invoking it with the following script (in package.json)
"scripts": {
"test:unit": "find ./test/unit -name '*.spec.js' | NODE_ENV=test xargs mocha --require babel-core/register --require ./test/unit/testHelper.js"
},
If I add my own .babelrc file to the root of my project then the tests work, but running sanity start fails.
The .babelrc file I am using contains
{
"presets": [
["env", {
"targets": {
"node": "current"
}
}]
],
"plugins": [
"transform-object-rest-spread"
]
}
If I don't add my own .babelrc file then sanity start works but the tests fail as babel is not being configured.
How can I tell babel to only use a specific config when I am running tests.
THE SITUATION:
I am implementing unit-testing in my Vue app, using vue-test-utils with Jest configuration.
When I am testing simple components everything is fine. But when I am testing components that import other dependencies, the test fails.
CONFIGURATION:
Vue version: 2.5.17
#vue/test-utils: 1.0.0-beta.20
cli-plugin-unit-jest: 3.0.3
babel-jest: 23.0.1
THE ERROR MESSAGE:
The exact error message depends on which dependency I am importing.
For example with epic-spinners the error is:
SyntaxError: Unexpected token import
With vue-radial-progress the error is:
SyntaxError: Unexpected token <
HOW TO REPRODUCE:
Make a fresh install of vue (with Jest as unit testing suite)
Run the example test, it should pass
Install a dependency (for example: npm install --save epic-spinners)
Import the dependency inside the HelloWorld component
Run the test again (without changing anything)
If I do these steps, the test fails with the above error message.
THE QUESTION:
How can I handle dependencies import in vue-test-utils / Jest ?
The problem was that some modules may not be compiled correctly.
The solution is to use the transformIgnorePatterns property of the Jest settings. That is, from the docs:
An array of regexp pattern strings that are matched against all source
file paths before transformation. If the test path matches any of the
patterns, it will not be transformed.
In my case, this is how I have solved the issue:
transformIgnorePatterns: [
"node_modules/(?!epic-spinners|vue-radial-progress)"
],
EDIT:
This is my jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
},
transformIgnorePatterns: [
"node_modules/(?!epic-spinners|vue-radial-progress)"
// "node_modules/(?!epic-spinners)",
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/'
}
In addition to #FrancescoMussi's answer, after editing my jest.config.js, in case you get the error: jest-transform-stub not found, just install it. in my case I didn't had installed jest-transform-stub and jest-serializer-vue. after installing those my tests started working.
npm install --save-dev jest-serializer-vue
https://www.npmjs.com/package/jest-serializer-vue
and
npm install --save-dev jest-transform-stub
https://www.npmjs.com/package/jest-transform-stub
In addition to #FrancescoMussi's solution, if it is still not working for you, make sure your Babel config is in the correct place as per the Jest docs
I had moved my Babel config to package.json which Babel wasn't detecting due to Vue CLI installing Babel 7. Moving Babel config back to babel.config.js resolved the issue for me.
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
I am trying to make my Ember project build to a directory outside of the project and for future builds I don't want to use command line flags each time.
ember build --output-path=/not-dist will work for me but I want Ember to add the flag automatically.
outputPaths: {
app: {
html: '../presentation/index.cfm',
css: {
'app': '../presentation/assets/ember-presentation-viewer.css'
},
js: '../presentation/assets/ember-presentation-viewer.js'
},
vendor: {
css: '../presentation/assets/vendor.css',
js: '../presentation/assets/vendor.js'
}
}
I have tried this as per the ember-cli documentation but ember-presentation-viewer.css was insisting on getting built in the dist directory with all the additional paths put there.
Is there a way to do this?
Go to package.json. Change scripts/build command:
"scripts": {
"build": "ember build --output-path=/not-dist"
},
From now on, run:
npm run build
You can configure your .ember-cli.js file to specify flags that should always be included in your command line builds (in lower camel case), as per this page in the Ember docs. To change the output directory you'll want to add the following line: "outputPath": "../../example-folder/presentation".
So your final .ember-cli.js should look like this:
{
/*
Ember CLI sends analytics information by default. The data is completely
anonymous, but there are times when you might want to disable this behavior.
Setting `disableAnalytics` to true will prevent any data from being sent.
*/
"disableAnalytics": false,
"outputPath": "../../example-folder/presentation"
}