I am just experimenting with Mocha and Mochapack and wanting to set up a Root Hook to fire before every test. According to the Mocha docs, I should place my hooks in a module and "require" them with the --require flag.
My NPM command is:
"test": "mochapack --colors --growl --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require jsdom-global/register --require assets/js/tests/roothooks.js --require assets/js/tests/setup.js assets/js/tests/Unit/**/*.spec.js"
My module where the root hook (roothooks.js) is defined is:
exports.mochaHooks = {
beforeEach(done) {
console.log("before!");
done();
}
};
What am I misssing?
(I added the tag mocha-webpack for this question - just to be clear I am using mochapack)
Related
How do I pass Cypress arguments to a NPM e2e build job?
I tried something like this but I cannot get variables to expand:
USERNAME=$EMAIL PASSWORD=$SECRET ng e2e --config-file=dev-cypress.config.ts
I also tried this:
ng e2e -- --USERNAME=$EMAIL --PASSWORD=$SECRET --CYPRESS_CONFIG_FILE=dev-cypress.config.ts
ng e2e --USERNAME=$EMAIL --PASSWORD=$SECRET --CYPRESS_CONFIG_FILE=dev-cypress.config.ts
And I tried this:
CYPRESS_CONFIG_FILE=dev-cypress.config.ts USERNAME=$EMAIL PASSWORD=$SECRET ng e2e
What am I missing? Whatever I try, the Cypress "effective configuration" does not expand the env variables correctly (at all)
Here is my build config in my angular.json config:
....
"e2e": {
"builder": "#cypress/schematic:cypress",
"options": {
"devServerTarget": "pas-ng-xdm:serve",
"watch": true,
"headless": false
},
"configurations": {
"production": {
"devServerTarget": "pas-ng-xdm:serve:production"
}
}
}
NOTE: Using a npx cypress command, that works for me:
"cypress:run:dev": "npx cypress run --config-file dev-cypress.config.ts --record
--key 0000000-e33c-4c88-9ead-1d0000000c --browser chrome --headless",
NOTE 2: When using the ng e2e, my only option is to allow it to load the default cypress.config.ts. Maybe that is ok: perhaps this is working as designed?
just wanted to ask if this is possible to change the location folder for recorded file? I am running tests for two different applications, one after another, and when tests are finished for both of them, I can only access the latest recording.
Thanks in advance!
You can add videosFolder attribute in your cypress config file with the folder path.
videosFolder: 'cypress/videos_project_2'
You can override the videosFolder path from the CLI, something like this:
npx cypress run --config videosFolder=cypress/videos_project_2
In your package.json, create two scripts like this:
"scripts": {
"test:project1": "npx cypress run --config videosFolder=cypress/videos_project_1",
"test:project2": "npx cypress run --config videosFolder=cypress/videos_project_2",
}
Then as per the project, directly run the commands:
npm run test:project1
//or
npm run test:project2
The easiest way is to set trashAssetsBeforeRuns.
See Videos
Cypress clears any existing videos before a cypress run. If you do not want to clear your videos folder before a run, you can set trashAssetsBeforeRuns to false.
cypress.config.js
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
video: true,
trashAssetsBeforeRuns: false
},
});
I have my project setup as follows, within my package.json I have the follow:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel ./public/index.html --open",
"build": "parcel build ./public/index.html NODE_ENV=production --no-source-maps --public-url ./public --out-dir ./dist",
"lint": "eslint --ext .js,.vue src --fix"
},
I can start my project by running: npm run:dev which starts as follows:
To debug the "dev" 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"
}
> impcentral#1.0.0 dev /Users/william/imp/src/impCentral
> parcel ./public/index.html --open
Server running at http://localhost:63188 - configured port 1234 could not be used.
As you can tell it does not stop at my break points within WebStorm. I've tried passing in the $NODE_DEBUG_OPTION within the package.json but to no avail.
Any ideas folks, open to trying this in Visual Studio Code too.
You don't need running your NPM configuration in debugger unless you need debugging parcel itself. As your application, served by parcel, is run in browser, you have to use JavaScript Debug run configuration to debug it.
start your app by running npm run dev (either in WebStorm or in terminal)
create a JavaScript Debug run configuration with your server URL (http://localhost:1234, or http://localhost:63188 in your case):
select this configuration and press Debug
I ran into a problem where my mocha tests were not finishing after running with chai-http. Mocha just hangs after the tests and eventually runs into a timeout (at least on my CI).
Turns out, Mocha (4.0) changed their behavior regarding the termination of the tests. The best workaround I have found is to add the --exit flag to the npm script to revert to pre-4.0 behaviour.
...
"scripts": {
"start": "node server.js",
"test": "mocha --exit"
},
...
I am having a problem testing UI components that import .scss with webpack. I am testing the component code directly, not the exported webpack bundle.
In my SUT
I have some code that imports scss:
import '!style!css!sass!postcss-loader!../style.scss'
This code causes an error when I run tests:
Error: Cannot find module '!style!css!sass!postcss-loader!../../stylesheets/parts/Breadcrumbs.scss'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
Cheap workaround
I've been working around this issue with:
try {
require('!style!css!sass!postcss-loader!../style.scss');
} catch(err) { console.log('Not webpack'); }
But this smells dirty, and I would rather not have this code in my SUT.
Running Tests
I can't figure out how to work in the solutions that I have found for this when using babel-node and babel-istanbul instead of mocha directly. Here is how I am currently running tests:
$ babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --recursive
All of the answers I have found are for mocha directly, but I am not running tests with:
$ mocha --compilers js:babel-core/register --require ./test/setup.js --recursive
?
How can I work in a compiler or setup file to tell mocha to ignore .scss files. I am going to have this problem next with .svg files too I am sure.
What about github.com/css-modules/css-modules-require-hook or if you wanna just ignore the css npmjs.com/package/ignore-styles
EDIT:
If you install ignore-style module and then run:
babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --require node_modules/ignore-styles --recursive
im sure it will work, bare in mind you might need to change the path node_modules/ignore-styles im assuming you have your node_modules in the root of your project.
So I had a similar problem trying to require with a webpack-loader prefix and failing as not in the context of webpack.
prunk was better than rewire etc as covered me for all files as was able to do path matching and replacement.
var prunk = require('prunk');
prunk.alias(/^(your loader prefix)/, '');
Then I modified requires extension handling to replace what was being imported.
require.extensions['.scss'] = function (module, filename) {
module.exports = 'whatever you want';
};
(exactly what style-loader does but style-loader cleans itself up! Also note style loader is misnamed and can handle many extensions))
I added this at the top of my test runner and no unfound modules!
Note I actually went further and used the original loader by itself by reading in the file with fs and passing it to the loader but that may have been over kill and should be using webpack to transpile tests with that sole loader in the first place!