How can I override the default output directory and file name jest-junit?
I would like to customise the output configuration of output when using Jest, but it still ends up in the default location, i.e. ./junit.xml in the project root folder.
My configuration
In package.json:
"scripts": {
"test": "jest --ci --reporters=default --reporters=jest-junit"
},
"devDependencies": {
"jest": "^24.9.0",
"jest-junit": "^10.0.0",
}
In jest.config.js
module.exports = {
testMatch: [
'**/*.spec.js',
],
reporters: [
'default',
[ 'jest-junit', {
outputDirectory: 'test_reports',
outputName: 'jest-junit.xml',
} ]
]
};
Expected result:
A file with the test result at ./test_reports/jest-junit.xml
Actual result:
A file with the test result at the default ./junit.xml
Solution
change package.json script from
"scripts": {
"test": "jest --ci --reporters=default --reporters=jest-junit"
},
to just
"scripts": {
"test": "jest --ci"
},
Explanation
The problem is that reporters configuration have been provided to both the jest.config.js file as well as cli arguments to the test script in package.json. The CLI options has higher precedence and does not provide the outputDirectory and outputName, the test result will revert to the default junit.xml.
Related
I'm migrating a mono-repo app from react-scripts v4 to react-scripts v5. The app uses npm workspaces and has a structure as below
AppName
|_ julia_project_files
|_node_modules (one)
|_ react_app
|_node_modules (two)
|_src
|_package.json(two)
|_ config_overides.js
|_package.json (one)
The app leverages multiple node.js libraries which break with webpack 5 (no inbuilt node.js polyfill support) and I had errors similar to this. I leveraged this solution to fix all errors except one
Module not found: Error: You attempted to import /Computer/AppName/node_modules/path-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
I don't see where I'm going wrong?
files
config-overrides.js
const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve('url'),
crypto: require.resolve('crypto-browserify'),
path: require.resolve("path-browserify"),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
buffer: require.resolve('buffer'),
stream: require.resolve('stream-browserify'),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);
return config;
}
package.json (one)
{
...some stuff,
"private": true,
"version": "1.0.0",
"main": "index.js",
"workspaces": [
"react-app",
"packages/*"
],
"scripts": {
"start-server": "julia --threads=auto --project=../julia-api -e",
"start-client": "cd react-app && npm run start-web",
"lint-fix-client": "cd react-app && npm run lint-fix",
"prepare": "husky install"
},
"devDependencies": {
"#types/jest": "^26.0.21",
"husky": "^7.0.4"
},
"dependencies": {
"path-browserify": "^1.0.1"
}
}
package.json (two)
{
"dependencies": {
... alot of non-related dependencies
"https-browserify": "^1.0.0",
// "path-browserify": "^1.0.1", I've tried installing it here too
"react": "^17.0.2",
"react-app-rewired": "^2.2.1",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^17.0.2",
"react-json-tree": "^0.15.0",
"react-scripts": "5.0.0",
"stream-browserify": "^3.0.0",
},
"scripts": {
"build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 build",
"start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 start",
"lint": "eslint src",
"lint-fix": "prettier --write './src/**/*.{js,jsx,css,json}' --config ./.prettierrc && eslint --fix src"
},
"eslintConfig": {
"extends": "react-app",
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
"last 1 chrome version"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://127.0.0.1:8080",
"devDependencies": {
... many dev dependencies
}
}
I've played around with where I install path-browserify be it package.json(one) or (two) and the error persists.
I found this post to be really helpful: https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error.
I need polyfills for my project, so I tested solutions one and three and both worked. I wasn't able to get the fallback solution to work that I had seen in other posts, but finally found this.
We had two other packages that caused this error (besides path-browserify), and I was able to employ the same steps from solution three in the post above to get them working as well.
I am trying to load the Css, Images and fonts using the webpack. Here is my webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: "main.js",
path: path.resolve(__dirname,"dist")
},
module:{
rules:[
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
},
};
This is my package.json
{
"name": "restaurant-page",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.2.0",
"style-loader": "^3.2.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {}
}
This is my index.js. When I uncomment the ./styles.css import I get the
main.js:290 Uncaught Error: Automatic publicPath is not supported in this browser in chrome console and my js imports doesn't work but it dosen't throw me error while building project when I run npm run build commmand in terminal. I tried using css import in each js module-- in home.js etc--file but that also doesn't work.
// import './style.css';
import { homeContent, removeIntroContent } from './Modules/home.js';
import { aboutContent, removeAboutContent } from './Modules/about.js';
import { reviewsContent, removeReviewContent } from './Modules/reviews.js';
const home = document.getElementById("home-btn");
const review = document.getElementById("review-btn");
const about = document.getElementById("about-btn");
homeContent();
home.addEventListener("click",()=>{
removeReviewContent();
removeAboutContent();
const id = document.getElementById("intro-content");
if(id != null) return;
homeContent();
});
review.addEventListener("click",()=>{
removeAboutContent();
removeIntroContent();
const id = document.getElementById("reviews");
if(id != null) return;
reviewsContent();
});
about.addEventListener("click",()=>{
removeReviewContent();
removeIntroContent();
const id = document.getElementById("about");
if(id != null) return;
aboutContent()
});
I have pushed the code to github if anyone want to look at file structure
Here is the link
ps: If I use the link tag to add css to html it works exactly as I want it to but that defeats the purpose of using webpack
I am having trouble with Webpack as well and I came across your question. I don't have a sure solution to your problem, but I hope to steer you in the right direction.
At first glance, I am wondering if editing your package.json file to use your webpack-config when you run 'npm run build' instead of the default webpack config. This could help activate the loaders you are trying to use, or atleast populate error messages that would allow you to investigate further. Editing your package.json would look like:
"scripts": {
"test": "echo \\\"Error: no test specified\\\" && exit 1",
"watch": "webpack --watch",
"build": "webpack --config ./webpack-config.js"
}
Your dependencies make sense and your file path for style.css seems correct, so I am wondering if Webpack does not know how to load your styles, fonts, images without your config file.
Can read more about Webpack configuration here.
https://webpack.js.org/configuration/
Hope I was able to help, good luck! If you have any further questions I'd be happy to help, as I'm learning Webpack too.
My Jest config details are
jest.config.js
module.exports = {
transform: {
'^.+\\.svelte$': 'svelte-jester',
'^.+\\.js$': 'babel-jest',
},
moduleFileExtensions: ['js', 'svelte'],
}
babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
}
package.json
.
.
"#babel/core": "^7.10.2",
"#babel/preset-env": "^7.10.2",
"babel-jest": "^26.0.1",
"jest": "^26.0.1",
"svelte-jester": "^1.0.6",
"#testing-library/svelte": "^3.0.0"
},
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "webpack-dev-server --content-base public",
"test": "jest src",
"test:watch": "npm run test -- --watch"
},
.
.
I created src/test folder where my test.spec.js is as follows
import {fireEvent, render} from '#testing-library/svelte';
import App from '../App.svelte';
describe('test', () => {
test('Just a mock test', async () => {
const myMock = jest.fn();
console.log(myMock());
myMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true);
console.log(myMock(), myMock(), myMock(), myMock());
});
});
Plz note that this I used a jest mock function just for testing purpose but whenever I import a svelte file as in this case App.svelte I get an error as below
FAIL src/test/test.spec.js
● Test suite failed to run
ParseError: Identifier is expected
I found a possible solution to this parsing error. Apparently, the IDE was unable to resolve certain style classes in the test.svelte file defined inside style tag, which is why it was showing up ParseError.
I would suggest anyone coming across this error to check your svelte file thoroughly for errors since svelte-testing-lib parses through the entire file before executing any test function.
I have this directory structure:
package.json
/src
a.js
/test
test_a.js
This is the content of package.json:
{
"name": "foo",
"scripts": {
"test": "mocha"
},
"devDependencies": {
"mocha": "6.1.4"
}
}
This is what I'm doing in test_a.js:
var a = require('a');
And I'm getting:
Error: Cannot find module 'a'
However, when I change it to this, everything works fine:
var a = require('../src/a');
The questions is: how do I configure package.json so that it knows where my modules are and I would not need to specify them by the "absolute" path ../src/?
You cannot resolve dynamic modules with require("a") because there can be a file called a.js in your project folder and there can an npm package in node_modules/a, and can lead to more errors.
But there are options you can do to avoid the usage of require("../src/").
One such option explained below (using babel)
Folder structure
src/
level1/
b.js
a.js
test/
a.test.js
Step 1
Install babel and a few other dependencies
npm install --save-dev #babel/core #babel/cli #babel/preset-env babel-plugin-module-resolver
Step 2
Create and Configure .babelrc file in project root.
{
"presets": [
"#babel/env"
],
"plugins": [
[
"module-resolver",
{
"root": [
"./src"
],
"alias": {
"level1": "./src/level1"
}
}
]
]
}
Here in module-resolver section I have added 2 aliases for folder paths.
"root": ["./src"] enables access to any file in src folder using require("/path_to_file"). Ex:- require("/a"), require("/level1/b")
"alias": {"level1": "./src/level1"} enables access to any file in src/level1 folder using require("level1/path_to_file"). Ex:- require("level1/b")
Step 3
Run your tests using mocha --require #babel/register.
Final package.json would look like below.
{
"name": "foo",
"scripts": {
"test": "mocha --require #babel/register",
},
"devDependencies": {
"#babel/cli": "^7.6.4",
"#babel/core": "^7.6.4",
"#babel/preset-env": "^7.6.3",
"#babel/register": "^7.6.2",
"babel-plugin-module-resolver": "^3.2.0",
"mocha": "6.1.4"
}
}
a.test.js
var a = require("/a");
var level1 = require("level1/b");
var assert = require("assert");
describe("a.js", function() {
it("should return `Hello from A`", function() {
assert.equal(a(), "Hello from A");
});
});
describe("b.js", function() {
it("should return `Hello from B`", function() {
assert.equal(level1(), "Hello from B");
});
});
Relevant docs
https://babeljs.io/docs/en/
https://github.com/tleunen/babel-plugin-module-resolver
I'm configuring simple project for testing using jest and babel. How do i make them work together ?
I have tried instructions mentioned here: https://jestjs.io/docs/en/getting-started but couldn't accomplish it.
abc.test.js
import {PI} from "./mathconsts";
describe("tests",()=>{
test('assert pi', () => {
expect(PI).toBe(3.14);
});
});
mathconsts.js
export const PI = 3.14;
package.json
{
"name": "simple-testing",
"version": "1.0.0",
"description": "Project to write simple tests",
"main": "index.js",
"scripts": {
"test": "jest"
},
"dependencies": {
"axios": "0.19.0",
"dotenv": "8.1.0"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/preset-env": "^7.6.3",
"babel-jest": "^24.9.0",
"jest": "24.9.0",
"prettier": "1.18.2"
}
}
babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
jest.config.js
module.exports = {
transformIgnorePatterns: [
"/node_modules/"
],
}
error found:
● 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:
/Users/tests/abc.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { PI } from "./mathconsts";
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (node_modules/#jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/#jest/transform/build/ScriptTransformer.js:579:25)
How do i make it run ?