jest projects different setupfiles for each project not working - config

My file structure is something like:
Product/
|- httpdocs/
|- jest.config.js
|- modules/
|- modules1/
|- jest.config.js
|- modules2/
|- jest.config.js
|- modules3/
|- jest.config.js
In each jest.config.js under the modules I have some configuration for that specific module like: setupFiles: ['<rootDir>/testHelpers/setup.js'].
In my top jest.config.js (under httpdocs) I have defined my different projects:
projects: [
'<rootDir>/modules/module1',
'<rootDir>/modules/module2',
'<rootDir>/modules/module3'
]
When I run jest under httpdocs, the tests fail because the setupfiles (and other configuration) are ignored inside my module/jest.config.js files.
When I run jest under module1, all the tests succeed
Am I doing something wrong or does the option projects not work like this?
-------- EDIT 1 --------
So I restructered my configs like #cimenx suggested.
Product/
|- jest.config.js
|- httpdocs/
|- modules/
|- modules1/
|- foo/
|- bar/
|- foobar.js
|- foobar.test.js
|- modules2/
|- ...
my jest.config.js file looks like this:
module.exports = {
rootDir: './httpdocs/modules',
testPathIgnorePatterns: ['/node_modules/', '/smsc/'],
projects: [
{
displayName: 'module1',
testMatch: ['<rootDir>/module1/*.test.js']
},
{
displayName: 'module2',
testMatch: ['<rootDir>/module2/*.test.js']
}
]
};
At the moment the issue is that jest cannot find any tests inside my modules.
-------- SOLUTION --------
While I was writing my EDIT 1, I tried some other configs...
Apparently my <rootDir> is always the directory where my jest.config.js file is in.
The solution for me was to write the whole path from the config file to the modules without the option rootDir: './some/path'
module.exports = {
projects: [
{
displayName: 'module1',
testMatch: ['<rootDir>/httpdocs/modules/module1/**/*.test.js']
},
{
displayName: 'module2',
testMatch: ['<rootDir>/httpdocs/modules/module2/**/*.test.js']
}
]
};
Thanks for the help!

Probably you should remove all jest.config.js on each modules and rewrite the Product/httpdocs/jest.config.js to be something like this:
module.exports = {
projects: [
{
displayName: "modules1",
setupTestFrameworkScriptFile: '<rootDir>/modules/modules1/jest.setup.js',
/*
Jest config that is specific for modules1
*/
testMatch: ["<rootDir>/modules/modules1/*.spec.js"],
},
{
displayName: "modules2",
setupTestFrameworkScriptFile: '<rootDir>/modules/modules2/jest.setup.js',
/*
Jest config that is specific for modules2
*/
testMatch: ["<rootDir>/modules/modules2/*.spec.js"]
}
]
}

Related

Vue set wrong font url in css while packing multi-entries app

PROBLEM DESCRIPTION
I am using vue develop a multi-entries app, the project folder is some like:
|- assets
| |- fonts
| | |- a.ttf
| |- styles
| | |- b.css // import ../fonts/a.ttf
|- src
| |- page_one
| | |- App.vue // import ../../assets/styles/b.css
Above project runs well in local deleopment enviroment, but reported 404 for the .ttf resource after deployed on the server. I checked the built product, found that the css font url is incorrect: I got http://<host>/css/fonts/a.ttf, while http://<host>/fonts/a.ttf is the expected URL.
TRACK the CAUSE
After lots of survey, I found above problem is related to the page entry. Since I got a lot pages, and I wanted to separate them into different folders, so the entries are some like:
// vue.config.js
module.exports = {
pages: {
'a/one': {
filename: 'a/one.html',
},
},
};
After built, the folder is like:
|- dist
| |- css
| | |- a
| | | |- one-<hash>.css // import ../fonts/a.ttf
| |- fonts
| | |- a.ttf
ROOT REASON: The pack tool (webpack) output css file in subfoler a/one-<hash>.css, while the url in css file is incorrect. Looks webpack supposed css file is directly placed at css folder.
SOLUTION: DO NOT USE / IN ENTRY. A correct configuration file is like:
// vue.config.js
module.exports = {
pages: {
'a-one': { // JUST DO NOT USE SLASH.
filename: 'a/one.html', // You can use this to build the produced pages intro separate folders
},
},
};
After all, if you use webpack and meet same problem, the reason and solution should be same.
Remove the '/' from the page entry. Correct:
// vue.config.js
module.exports = {
pages: {
'a-one': { // JUST DO NOT USE SLASH.
filename: 'a/one.html', // You can use this to build the produced pages intro separate folders
},
},
};

Storybook + Vue.js + Sass + npm7 workspaces won't compile

I have a project which I am breaking into multiple workspaces using npm7.
I am using sass in vue components in a package (another workspace), and importing that package into my current workspace.
When I use sass in the workspace in which storybook is running, it compiles fine.
When I use css in the other workspace it compiles fine.
When I use sass in another workspace, it doesn't find the loaders.
ModuleParseError: Module parse failed: Unexpected character '#' (39:0)
File was processed with these loaders:
* ../node_modules/vue-docgen-loader/lib/index.js
* ../node_modules/vue-docgen-loader/lib/index.js
* ../node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> #import '../../../bootstrap4/scss/functions';
| #import '../../../bootstrap4/scss/variables';
|
at handleParseError (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/webpack/lib/NormalModule.js:469:19)
at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/webpack/lib/NormalModule.js:503:5
at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/webpack/lib/NormalModule.js:358:12
at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.module.exports (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/vue-docgen-loader/lib/index.js:28:5)
at LOADER_EXECUTION (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.module.exports (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/vue-docgen-loader/lib/index.js:28:5)
My main.js works for local sass. It is as follows:
const path = require('path');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials"
],
"webpackFinal": async (config, { configType }) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
},
}
Is it possible to use storybook with npm workspaces?
I am using storybook 6.2.8.
I am using vue.js 2.6.12
On further investigation, I found the error is in the line:
include: path.resolve(__dirname, '../'),
I removed this line and it worked fine. Clearly it is limiting the rule to the current workspace instead of all workspaces.

Webpack Error Reading/Resolving the Entry Module

I'm receiving an error when trying to execute a watch command on webpack and cannot figure out the problem. I have a feeling there's more than one issue, but I'm pretty sure I at least have an idea of one of the problems.
To give a little background, I'm way out of my know-how with all of this and am trying to self-teach how to write a web application with python. I stumbled onto this blog post with a basic example with detailed instructions:
https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9
... and getting errors with no context from the source material. They also have a github and youtube video where it was presented, but still no such luck.
I think part of the issue is that their example was written on a MAC which the directory works a little different than windows which is my computer, so in part of the code the directory appears to be off because of that. Here's a screenshot showing the Node.js, the file folder, and the webpack.config.js code:
Here's a screenshot showing the Node.js, the file folder, and the webpack.config.js code:
I noticed that the directory in the example had had '/static/js/index.jsx', but my directory uses the other slash \static\js\index.jsx and the error shows the odd combining as C:\Users...\static/static/js/index.jsx. After learning that \ was an escape code in javascript, I eventually tried the code re-done with the changed slashes.
Here's another screenshot showing the newly run effect ... and it didn't appear to have an effect.
So I'm not sure if what I "fixed" was also an error, but not the current one since it doesn't make sense to me how directory slashes can change... but still no real answers and my knowledge on this was too thin to effectively look it up or learn the nature of the issue.
I have a feeling the actual module either is or may also have some kind of error in the webpack code, but I'm not too sure.
Thanks for any and all time on helping me out,
Matt
Edit: the original post had screenshots of the code and reference to the source material it was copied from, but for reference here are the code segments:
The directory layout is:
| Documents
|--- Python Scripts
|--- fullstacktemplate
|--- fullstack_template
|--- static
|--- js
|--- index.jsx
| node_modules
| index.html
| package.json
| package-lock.json
| webpack.config.js
The node_modules and package-lock.json were auto-created with set up of NPM, Webpack, and/or Babel. Package.json was further edited which will be listed below.
index.jsx is 1 line:
alert("Hello World!");
package.json is as follows:
{
"name": "fullstacktemplate",
"version": "1.0.0",
"description": "fullstack template that will say hello in another language when activated",
"main": "index.jsx",
"scripts": {
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --progress -d --config webpack.config.js --watch"
},
"keywords": [
"python",
"react",
"npm",
"webpack"
],
"author": "Matt Lane",
"license": "ISC",
"devDependencies": {
"webpack": "^4.28.2"
}
}
webpack.config.js is as follows:
const webpack = require('webpack');
const config = {
entry: __dirname + '\\js\\index.jsx',
output: {
path: __dirname + '\\dist',
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
module.exports = config;
The webpack.config.js file is my "corrected" one with the \ slashes. The original unedited version was:
const webpack = require('webpack');
const config = {
entry: __dirname + '/js/index.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
module.exports = config;

Vue - Compile other folder outside of /src in Vue.js project

I have a regular Vue.js project (created using v3.0.3) that uses WebSockets. Also in the project root is the /server folder which has the Node.js code that houses the multi-player aspect and socket code.
However, since the folder /server is independent of the /src folder from the Vue.js project, how do I make use of the Vue CLI webpack config and add babel compiling (using Webpack) to appropriately compile both the /src
https://cli.vuejs.org/guide/webpack.html#simple-configuration
I was able to import babel-cli and just compile/run like so:
./node_modules/.bin/nodemon --exec babel-node --presets env,stage-2 server.js
and it worked.
Actually, you should add .babelrc file and declare presets, env options and etc into it.
I don't know why you don't eject, because of access to webpack configuration. In the webpack config, you can declare your src folder or exclude other folders like node_modlules or your custom server folder.
For example, see webpack config for your issue:
module.exports = {
~~~
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: ['node_modules', 'server'],
use: [
{
loader: 'babel-loader',
},
],
},
~~~
And see a sample .babelrc file:
{
"presets": [
"es2015",
"es2016",
"es2017",
"env",
"stage-0"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
[
"transform-runtime",
{
"helpers": true,
"polyfill": true,
"regenerator": true
}
]
],
"env": {
"development": {
"compact": false
}
}
}
Then you should use your webpack commands to build:
webpack -p --config ./webpack.production.config.js

Intern client.js does not use the packages definition from the config file, so cannot resolve dojo/_base/declare

I've been fighting with Intern for quite a while, to test both server code (following these recommendations) and client code (tradionnal app, as defined on this project of mine, for example).
The Intern config file contains:
loader: {
packages: [
{ name: 'dojo', location: './libs/dojo' },
{ name: 'server', location: './server' }
]
},
However, the location of the dojo package is always ignored. The reported error is:
$ node node_modules/intern/client.js config=intern suites=server/model/tests/News
Defaulting to "console" reporter
Error: Failed to load module dojo/_base/declare from <root>/dojo/_base/declare.js (parent: server/model/Ne
ws)
at <root>\node_modules\intern\node_modules\dojo\dojo.js:742:12
at fs.js:207:20
at Object.oncomplete (fs.js:107:15)
I redacted for the <root> part to simplify the output.
My current workaround is to copy the dojo folder at the <root> level but that's inconvenient...
My current folder structure is:
<root>
|- client
|- libs
| |- dojo
| |- ...
|- node_modules
| |- grunt
| |- intern
| |- ...
|- server
|- dao
| |- tests
|- model
| |- tests
|- ...
Where am I wrong?
Update: Everywhere I read (like here), the configuration is specified as a MID, not as a filename with an extension. When I run my command with "config=intern.js" the configuration is correctly processed (I've hacked "client.js" to log the config content). Note: I'm running Node.js/Intern on a Windows machine...
Additional information: Here is the minimum content required to process my tests.
define({
loader: {
packages: [
{ name: 'dojo', location: './libs/dojo' },
{ name: 'server', location: './server' }
]
},
suites: [ 'server/allTests' ]
});
The issue I faced is related to the loader:
If the config file intern.js is at the root level, the command MUST contain the extension: config=intern.js;
If the config file is in a subfolder like tests then the extension MUST be omitted in the command: config=tests/intern.
This happens in intern/client.js, line 38, with the call to the Node.js require() function.