mocha.opts deprecated, how to migrate to package.json? - javascript

I'm working on a massive project and since last week I updated mocha, Now we are getting warning:
DeprecationWarning: Configuration via mocha.opts is DEPRECATED and
will be removed from a future version of Mocha. Use RC files or
package.json instead.
I want to migrate the options to package.json but there is no good migration guide. all posts on GitHub with similar questions are all answered "see the docs". But the docs doesn't show how to transfer one option from mocha.opts to package.json, there is no information on how it should be formatted. Only thing I can find is that the "spec" property is the pattern for files to run. Nothing else seems implicit to me.
Our mocha.opts file:
--reporter dot
--require test/mocha.main
--recursive src/**/*.test.js
--grep #slow --invert
My attempt which doesn't work:
"mocha": {
"reporter": "dot",
"require": "test/mocha.main",
"spec": "src/**/*.test.js",
"grep": "#slow --invert"
},
Please explain how I should format this configuration block in order to achieve samme behaviour as when using the options from the above mocha.opts

I too had some difficulties finding the exact solution for migrating to new standards and could finally resolve those. I hope I'm not too late and I can still help you.
So first thing, you would need a new config file to replace mocha.opts. Mocha now offers quite some variations of file formats which can be used for it. You can find these here in their GIT. I took .mocharc.json and will be using it for further examples. Although adding it didn't change anything just the way it shows no effect for you too.
The catch was to point mocha test script to this config file in package.json. Provide --config flag in the test script in the scripts section in your package.json like below.
"scripts": {
"test": "mocha --config=test/.mocharc.json --node-env=test --exit",
"start": "node server"
}
Now you can update your configs in the .mocharc.json file and they should reflect correctly. Below is an example of it.
{
"diff": true,
"extension": ["js"],
"package": "../package.json",
"reporter": "spec",
"slow": 1500,
"timeout": 20000,
"recursive": true,
"file": ["test/utils/helpers.js", "test/utils/authorizer.js"],
"ui": "bdd",
"watch-files": ["lib/**/*.js", "test/**/*.js"],
"watch-ignore": ["lib/vendor"]
}
I'm using file property to define which files should go first as they need to be executed first. They will be executed in the order you provide them in the file array. Another property you can play around is slow whose value defines whether mocha consider the time taken to execute any test case as slow or not.

Check out this link to see the new format of the options file for mocha:
https://github.com/mochajs/mocha/blob/master/example/config/.mocharc.yml
Basically you need a .mocharc.yml, or .mocharc.json, (there are a couple more formats) to set the mocha configurations. I came to this POST hoping to find an answer too. Hope this is helpful for you!

I ended up getting the package.json working by using an array instead of the string literals you did.
ex:
"mocha": {
"require": ["tsconfig/register"]
}
Might be worth a try!

Seems like mocha won't check the package.json for config by default so you need to pass --package package.json.

/* This example illustrates how to configure mocha globally
*1. add the 'mocharch.json' to link mocha to the 'package.json' like so:
*/
{
"package": "./package.json"
}
/* 2. in the 'package.json' add: */
"mocha": {
"recursive": "true"
}

The answer by Rathore is great, but I just wanted to point out that if you just add the .mocharc.json file to your base directory, you don't need to specify "--config=test/.mocharc.json" in your package.json, it just finds it automatically.

you can create .mocharc.json in project root folder.
{
"spec": "src/tests/**/*.ts",
"require": "ts-node/register"
}
in package.json add mocha property.
"mocha": {
"spec": ["src/tests/**/*.ts"],
"require": ["ts-node/register"]
}
js project change file name.

Related

generated-stories-entry.js error for rule 'import/no-unresolved'

I have added storybook to my Vue project with vue add storybook.
This has added several dependencies to my project, e.g. in my package.json I find this among others:
"vue": "~2.6.14",
"#storybook/vue": "6.4.19",
"vue-cli-plugin-storybook": "~2.1.0",
"eslint": "~6.8.0",
Now I am trying to run the storybook server with npm run storybook:serve but I get an error:
I have been trying different things, like configuring the 'import/no-unresolved' rule to be off, emitError: false on the eslist-loader inside .eslintrc, skipping the linter plugin in the webpack configuration, etc. Nothing worked and each attempt just produced new errors.
Currently I have no explicit es-linter nor webpack configuration at all. But if I comment a line inside node_modules/eslint-loader/index.js like this:
// emitter(new ESLintError(messages));
then it all works.
I don't want to be commenting out lines inside a library, I would like to have a proper solution and understand what is happening.
I found the answer myself. I had to add the eslint-plugin-import package:
npm install eslint-plugin-import
And add the plugin to the eslint configuration:
"plugins": [
"import"
]
For me the suggested answer didn’t work, what fix it in the end was to ignore those files in eslint configuration:
"ignorePatterns": [
"generated-stories-entry.js",
"storybook-init-framework-entry.js"
],

Disable Coverage on Untested Files - Jest

When using #vue/cli-plugin-unit-jest, I am receiving coverage reports each time I run my unit tests, regardless of whether I have the --coverage flag in the execution line or not. I do not want to receive coverage reports on all of my untested files. When searching for an answer online, there are numerous questions about how to turn that feature on, not turn it off. I can't find it in the documentation either.
How do you disable the Coverage on Untested Files feature in Jest?
Disabling coverage similar to enabling it, just prefix the pattern with an ! like so:
{
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**",
"!**/folder-with-untested-files/**"
]
}
Or disable coverage all together with "collectCoverage": false.
If that does not work, then you have this params overridden somewhere in your code.
"collectCoverage": false
in jest.config.js
You can also suppress coverage from the command line. The package I'm working with provides a test script, and I was able to pass the collectCoverage option in as a flag. The relative path here works because my test runner is called by npm and that should set the working directory to the root of my project:
npm run test -- path/to/your.spec.js --collectCoverage=false
And the other way around, you can specific a single file to collect coverage from. It'll override any broad-ranging glob you may have already defined in your project's test config files. One reminder, you collect coverage from your source file, not your spec file. And one other reminder, you can list pretty much any file you want in that coverage option, so make sure you get it right:
npm run test -- path/to/your.spec.js --collectCoverageFrom=path/to/your/source/file.js
Package.json
testw": "jest --watch --collectCoverage=false"
watches the test files for change
npm command
npm run testw Yourfilename.js
"collectCoverage": false
in package.json, will disable coverage, collection, As mentioned by #Herman you can also put ! before file pattern in value of property collectCoverageFrom in package.json
In my case, in package.json I have this statement collectCoverage:false and still I was getting errors. Then I realized I also have collectCoverageFrom line and I removed it since I did not need it. After removing the below line it worked as a charm.
"collectCoverageFrom": [
...,
...
]

Disable eslint for all files but js files?

Right now it's giving error that .png and .less files aren't valid, everything is invalid.
I want eslint to only look at .js and .jsx files.
I don't see any way to do that.
I did find eslintignore which is not the best way to do things.
I don't want to maintain a list of files to ignore.
Whitelist approach please.
You could make use of the property "overrides" on your .eslintrc file to include only the files/file types you want:
{
"overrides": [
{
"files": [ "src/**/*.js", "src/**/*.jsx" ]
}
]
}
Docs: https://eslint.org/docs/user-guide/configuring#example-configuration
I believe there is no way to configure it other than the arguments for the CLI
If you are running it through gulp, first pipe the src like
src(['**/*.js', '**/*.jsx'])
.pipe(eslint())
...
If you would rather do it via npm command, you can create a script in your package.json like so:
"scripts": {
...
"eslint": "eslint **/*.js **/*.jsx",
Then invoke it with npm run eslint

How can I switch to a different ESLint style guide?

I started a new Vue project with vue-cli and Webpack and configured ESLint to Airbnb's style guide.
How can I change this choice to a Standard style? I am getting really tired of the surplus in commas and semicolons, and want to give it Standard JS a try.
I am working alone at this project right now, so do not worry about team complains :)
Just install StandardJS via npm install standard --save-dev.
Then run through the rules just to quickly get a feel of it.
Finally, create a script in your package.json to run StandardJS, when you need it:
{
"scripts": {
"check": "standard"
}
}
...then you can run it via npm run check
To provide a quick way to yourself to fix most coding style typos, add a fix script to your package.json:
{
"scripts": {
"check": "standard",
"fix": "standard --fix"
}
}
...and run via npm run fix
To get a more nicer representation of coding style errors, install snazzy via npm install snazzy --save-dev, then modify your package.json like so:
{
"scripts": {
"check": "standard --verbose | snazzy",
"fix": "standard --fix"
}
}

How to make Visual Studio Code check entire project for errors?

I'm using VS Code for TypeScript/JavaScript development. When I open a file it will check that file for errors. The problem is if I'm refactoring (like I move some shared code to a new location or change a name) it won't show me the errors this caused until I open the file with the problem. ...so if I want to do extensive refactoring I have to open every file just to make it scan the file for errors.
How can I make VS Code scan the whole project for errors without having to open each file one by one manually?
VS Code (v1.44) has an experimental feature, that allows project wide error reporting in TS. Try it out:
// put this line in settings.json
"typescript.tsserver.experimental.enableProjectDiagnostics": true
Figured it out. Note this answer is specific to TypeScript, which is what I am using. Here it is:
Make sure typescript is installed globally (I just had mine installed locally apparently):
npm install -g typescript
Then in VS Code press Shift+Ctrl+B. If you don't have a task runner set up it will ask what you want. I selected typescript and the tasks.json file will look like this:
{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}
Then pressing Shift+Ctrl+B (or Shift+Command+B in macOS) will check the entire project for problems and they will be reported in your "problems" panel.
If you don't want to install TypeScript globally, you can do the following:
Install TypeScript locally on the project, that is yarn add --dev typescript or npm install --save-dev typescript.
Add a check-types run script to ./package.json. --noEmit means that the compiler will won't generate any JavaScript files.
{
"scripts": {
"check-types": "tsc --noEmit"
}
}
Let VSCode know about the run script in /.vscode/tasks.json.
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "check-types",
"problemMatcher": [
"$tsc"
]
}
]
}
To run the tasks hit the F1 key and select 'Run Task', and then 'npm: check-types'.
If you add the following lines to the task, pressing Ctrl+B will run it.
"group": {
"kind": "build",
"isDefault": true
}
For the most recent version of tasks.json this is the correct json, following deprecations in version 1.14. Create this as /.vscode/tasks.json
{
"version": "2.0.0",
"command": "tsc",
"type": "shell",
"args": [
"-p",
"."
],
"presentation": {
"reveal": "silent"
},
"problemMatcher": "$tsc"
}
Once you have open your project in vs code, open the vs code terminal and run:
node_modules/.bin/tsc --noEmit
Go to View menu > Extensions and make sure the Microsoft VS Code ESLint extension is installed.
In Settings, search for "ESLint > Lint Task: Enable", and enable that setting (docs).
In the Terminal menu, choose Run Task… > eslint: lint whole folder.
UPDATE.
My answer below does not answer the original question, but if you're like me and have found this thread searching for how to turn on // #ts-check project-wide in VSCode so that you don't need to add // #ts-check to every file then my answer below is what you need. I have searched and searched and kept getting this thread as my top result so hopefully this helps others as well
I'm on vscode version 1.52.1 and the answer is so simple and right on the vscode website:
https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript
scroll down to the "Using jsconfig or tsconfig" section
Add a jsconfig.json in your project root and add "checkJs": true
{
"compilerOptions": {
"checkJs": true
},
"exclude": ["node_modules", "**/node_modules/*"]
}
You might need to restart vscode once you add it in
None of the other solutions worked fully for me. Here's a tasks.json that does, working with vscode 1.67+. On Linux etc. set command to tsc, on Windows be sure to run tsc.cmd as tsc alone will attempt to run the bash script and produce the following error:
The terminal process failed to launch: A native exception occurred during launch (Cannot create process, error code: 193)
"revealProblems": "always" in the presentation section shows the Problems panel on completion.
{
"version": "2.0.0",
"tasks": [
{
"label": "tsc: error check project",
"command": "tsc.cmd",
"args": [
"-p",
".",
"--noEmit"
],
"isBackground": false,
"problemMatcher": "$tsc",
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"revealProblems": "always",
}
}
]
}
Edit: Since updating to 1.52.0 this no longer works. It will instead replace the current project files with what you selected...
===
I've tried every solution I can find and I think it's safe to say the answer is: You can't*
The best I've found is still technically opening each file manually, but at least it's not one-by-one:
You can't drag/drop a directory but you can select multiple files (including directories) and drag/drop. The directories will be ignored and any files you had selected will be opened in tabs.
Next, you need to give each tab focus so it triggers eslint to run. (Holding down the next tab keyboard shortcut works.)
This is terrible and I beg someone to prove me wrong.
*I haven't found a way that works as well as opening files manually. Each method -- experimental vscode feature and tsc task -- has its own set of drawbacks. The vscode feature is clearly the solution but without a way to ignore node_modules, etc. it's too painful to use.

Categories