We Keep Coding

How to get nyc coverage to work with es6 import (.mjs files)

I've typically used nyc to provide coverage for my unit tests. All honkey dorey for pre-ES6 require('myModule') tests. I'm having trouble getting it to work with unit tests that use ES6 import. Tests without coverage work with --experimental-modules and .mjs files:
package.json
"scripts": {
"test": "node --experimental-modules ./test/test.mjs",
... others deleted to save space
},
And everything works. I'm using Tape for testing if that matters. Output looks like:
(node:9360) ExperimentalWarning: The ESM module loader is experimental.
TAP version 13
# number
ok 1 should be equal
(... more deleted)
But when I try to use nyc, e.g. nyc --reporter=lcov --extension .mjs npm test
I get an error:
(node:7304) ExperimentalWarning: The ESM module loader is experimental.
Error [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension: C:/Users/Morgan/.node-spawn-wrap-6952-61a26e1bb867/node
at exports.resolve (internal/loader/ModuleRequest.js:126:13)
at Loader.resolve (internal/loader/Loader.js:48:40)
....
I'm using node version 8.9.1 and nyc version 13.0.1, running on Windows.

As the documentation states, .mjs support should be explicitly added:
Supporting file extensions can be configured through either the
configuration arguments or with the nyc config section in package.json.
nyc --extension .mjs npm test
{
"nyc": {
"extension": [
".mjs"
]
}
}

Flow: Throws error Cannot resolve module "react-redux" even tho it's installed

Even tho module is installed and it exists, Flow cannot resolve it and throws error.
See below:
1) Inside bash I ran flow and it throws error that module is not found
user#pc:~/code/project$ flow
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/functionalities/Growth/index.js:3:25
Cannot resolve module react-redux.
1│ // #flow
2│ import React from "react"
3│ import { connect } from "react-redux"
4│
5│ type Props = {
6│ children: Function
Found 1 error
2) Below command checks whether directory exists and it does
user#pc:~/code/project$ ls node_modules | grep react-redux
react-redux
I tried to remove and reinstall both node_modules directory and yarn.lock file.
Versions should be matching:
flow version
Flow, a static type checker for JavaScript, version 0.77.0
.flowconfig:
[version]
0.77.0
This is very likely bug with Flow, I also submitted issue.

How to fix it
You have two options:
stub the dependency by hand
bring in flow-typed to find the dependency type
file/stub it for you
I use option 2 but it is nice to know what is happening underneath
Option 1
In .flowconfig, add a directory under [libs],
...
[libs]
/type-def-libs
...
Now, create that directory at your project root and a file /type-def-libs/react-redux which contains,
declare module 'react-redux' {
declare module.exports: any;
}
Option 2
install flow-typed, if using yarn yarn add -D flow-typed
I prefer to install every locally to the project when possible
run yarn flow-typed install
this will install any type definition files for modules that it finds AND it will stub any modules it doesn't find, which is similar to what we did in option 1
Why is this error happening
Flow is looking for the type definition for the module you are importing. So while the module does exist in /node_modules that module doesn't have a type definition file checked into its code.

I had the same issue as you.
I resolved it by using flow-typed
I did the following:
Install flow-typed globally. example: $ npm install -g flow-typed
Then inside your project root folder, run $ flow-typed install react-redux#5.0.x
• Searching for 1 libdefs...
• flow-typed cache not found, fetching from GitHub...
• Installing 1 libDefs...
• react-redux_v5.x.x.js
└> ./flow-typed/npm/react-redux_v5.x.x.js
react-redux
You should see this if the install was successful.
Then try running flow again $ npm run flow in your project. The error with react-redux will no longer be there.

Alternative solution (for some cases)
Check your .flowconfig and remove <PROJECT_ROOT>/node_modules/.* under the field [ignore] (in case you have it there).
UPDATE 1 (by arka):
Or you can add !<PROJECT_ROOT>/node_modules/react-redux/.* after <PROJECT_ROOT>/node_modules/.*. This will ignore all the modules except for react-redux.
Thanks to #meloseven who solved it here.

I checked my package.json file and noticed react-redux was missing. I manually added it to the dependencies "react-redux": "x.x.x" and ran npm install thereafter. Note that the version number should be compatible with the other modules.

Please ensure that you provide the path under 'ignore' in .flowconfig, like this:
[ignore]
.*/node_modules/react-native/Libraries/.*
and not like this:
.*/node_modules/react-native/Libraries/Components
.*/node_modules/react-native/Libraries/Core
....

How can I run gulp with a typescript file

Have a gulp project that uses a gulp.js file but my project is in typescript so I'd rather have a gulp file in typescript. It would be possible to break the process into two steps where I:
1. Manually transpile the typescript gulp file into js, then
2. Call gulp <some-task-name>
But that doesn't seem optimal. Is there any better way of doing
this?

From Gulp docs for transpilation:
Transpilation
You can write a gulpfile using a language that requires transpilation, like TypeScript or Babel, by changing the extension on your gulpfile.js to indicate the language and install the matching transpiler module.
For TypeScript, rename to gulpfile.ts and install the ts-node module.
For Babel, rename to gulpfile.babel.js and install the #babel/register module.
So the simpler way to add TypeScript support in Gulp:
Install ts-node, typescript, and #types/gulp:
$ npm i -D ts-node typescript #types/gulp
If you have a tsconfig.json file set ts-node.compilerOptions.module to "commonjs"
{
// these options are overrides used only by ts-node
"ts-node": {
"compilerOptions": {
"module": "commonjs"
}
}
}
(You don't need a tsconfig.json file, this is just for if you have one in your project already)
Create gulpfile.ts with the following demo code:
import gulp from 'gulp'; // or import * as gulp from 'gulp'
gulp.task('default', () => console.log('default'));
(or rename your existing Gulpfile.js to gulpfile.ts)
Start the build:
$ npx gulp
The output should look similar to this:
$ gulp
[21:55:03] Requiring external module ts-node/register
[21:55:03] Using gulpfile ~/src/tmp/typescript-tmp/gulpfile.ts
[21:55:03] Starting 'default'...
default
[21:55:03] Finished 'default' after 122 μs

In case anyone else runs into this, #tony19's answer above will only work for some projects ;-)
import * as gulp from 'gulp'; won't always work (it depends on your tsconfig.json settings- specifically allowSyntheticDefaultImports), the "safer" thing to use is import gulp from 'gulp'; which should work regardless of the allowSyntheticDefaultImports value.

Set up a gulp.js file in the root of your project with nothing but the following line.
eval(require('typescript').transpile(require('fs').readFileSync("./gulp.ts").toString()));
Then create another actual gulp file written in typescript in a file gulp.ts. What will happen is that the gulp.js file will be loaded but will bootstrap the process by compiling your `gulp.ts' file and passing the transpiled results instead.
This allows us to not have to precompile the gulp.ts file before using it. Instead you can just type gulp test and it will be executed from your tyepscript file without any extra calls.
Make sure to run the following first:
npm install typescript --save-dev
npm install fs --save-dev

mocha equivalent to webpack's resolve root

I'm writing some mocha tests that load code that have paths like this:
import MyStore from "stores/MyStore"
This works fine in the web browser because we are using the webpack-dev-server which in turn reads this entry from webpack.config.js: config.resolve.root: [path.resolve(__dirname, "./app")] so it knows to find ./app/stores/MyStore.
This path does not work when running it from mocha --compilers js:babel/register. I'm trying to locate a package or configuration that I may use for this. It would save us from having to change may code references and of course keep our imports more portable.
Not sure if it matters, we use iojs. If this really can't be done it would be fine just to update the paths. Thank you...

How about including your app directory in $NODE_PATH:
env NODE_PATH=$NODE_PATH:$PWD/app mocha ...

Here's a cross-platform method. First install cross-env:
npm install cross-env --save-dev
then in your package.json:
"scripts": {
...
"test": "cross-env NODE_PATH=./app mocha ..."
}

In windows, I had to do this:
set NODE_PATH=%CD%/app&& mocha...
for some reason, adding a space after 'app' would cause it not to work

Mocha with Blanket, Babel and LCOV reporter

Hiho,
I've got a problem with my Mocha configuration. I've got ES6 code which should be compiled by Babel and then I want to get coverage (in LCOV format) of this ES6 code.
My approach to this problem was to use mocha, mocha-lcov-reporter, babel and blanket packages. Code structure is:
-- src
----- ...
-- test
----- spec
-------- something.spec.js
-------- ...
----- blanket.js
Where specs are in test/spec directory (matches also *.spec.js pattern) and blanket.js is:
require('blanket')({
pattern: require('path').join(__dirname, '..', 'src')
});
Command which I prepared is:
./node_modules/.bin/mocha $(find test -name '*.spec.js') --recursive --compilers js:babel/register -r test/blanket -R mocha-lcov-reporter
So, it should run Mocha tests for all *.spec.js files, compiling them by Babel and starting test/blanket.js file before.
After starting this command I get Error: Line 1: Unexpected reserved word error from esprima.js. When I run it without requiring test/blanket file it run without problems, but ofc I haven't coverage.
Has anyone tried to do so? Do you have any ideas how to do it?

Okey, problem already resolved, but without Babel (native ES6 instead); I've done it another way. I've used istanbul-harmony and mocha packages. Then the command is:
./node_modules/.bin/istanbul cover ./node_modules/.bin/_mocha -- $(find test -name '*.spec.js') -R spec -u exports