We Keep Coding

Run typescript build with tsconfig-paths using pm2

I am trying to run the build (.js files) of typescript with the tsconfig-paths in production, I have no problem running typescript with paths. Just when running the build on production with pm2.
I have tried:
apps: [
{
name: 'app',
script: './dist/index.js',
node_args: '-r ts-node/register -r tsconfig-paths/register',
},
],

TLDR: If as I assume you run info *the* common misunderstanding about tsconfig you may try:
{
apps: [
{
name: 'app',
script: './dist/index.js',
node_args: '-r ts-node/register -r tsconfig-paths/register',
env: {
"TS_NODE_BASEURL": "./dist"
}
},
}
Explanation:
Typescript allows us to specify path aliases so that we don'y have to use ugly relative paths like ../../../../config. To use this feature typically you would have a tsconfig.json like this:
...
"outDir": "./dist",
"baseUrl": "./src", /* if your code sits in the /src directory */
"paths": {
"#/*": ["*"]
},
...
Now you can do the following:
import config from "#/config";
It will compile without errors. During the compilation the requested modules are in the src directory. However:
$ node -r tsconfig-paths/register dist/index.js
Failure! Cannot find module '#/config'
Why is that? Because at runtime config no longer sits inside ./src but instead can be found in ./dist.
So how do we handle this?
Fortunately tsconfig-paths allows us to override baseUrl with TS_NODE_BASEURL env:
$ TS_NODE_BASEURL=./dist node -r tsconfig-paths/register dist/index.js
Success!

Cannot find module with **/*.test.js

I'm trying to set up testing for my Next.js project. I want to test it with RITEway which is based on tape. I want a test command that finds all files in my src/ folder that end with .test.js.
Here is the commend I came up with:
"test": "NODE_ENV=test node -r #babel/register src/**/*.test.js",
I get the error:
Error: Cannot find module '/path/to/project/src/**/*.test.js'
How can I tell node to find all files ending in .test.js in my src/ folder?
Extra context:
My testing files live in src/features/<feature>/<feature.test.js>, e.g.:
"test": "NODE_ENV=test node -r #babel/register src/features/home/home-page-component.test.js",
Works to find a single file and run it.
"test": "NODE_ENV=test node -r #babel/register src/**/**/*.test.js",
Works to find all folders in features, but ignores files like src/<file>.test.js, which I also want to run.
I had to install #babel/register and #babel/core for Node to process absolute imports and newer syntax.
My .babelrc is:
{
"env": {
"test": {
"plugins": [
[
"module-resolver",
{
"root": [
"."
],
"alias": {
"features": "./src/features"
}
}
]
]
}
},
"presets": [
[
"next/babel"
]
],
"plugins": []
}

As Jon Sharpe said, you have to feed the regex into riteway.
"test": "NODE_ENV=test riteway -r #babel/register 'src/**/*.test.js'",

How to set env in package.json which is used within .bablerc

I am trying to run Jest tests as part of a script before I then run webpack, like this.
npm run test
webpack --progress --profile --watch --mode development
Jest only works with compiled code, so I had set my .babelrc to the following, which worked, however then it transpiled all my code in webpack which I didn't want, in development mode I want to leave the JavaScript un-transpiled so I can work with it without it being obfuscated.
{
"presets": [ "#babel/preset-env" ]
}
Instead I want to run Jest by calling 'npm run test' which then I can specify only that script transpiles the code and then webpack runs without transpiling, I was hoping something like this in my .babelrc file
{
"env": {
"test": {
"presets": [ "#babel/preset-env" ]
}
}
}
Then in my package.json I could set the env to test which then would leave webpack alone.
"scripts": {
"test": "SET env=test&& jest --config jest.config.js"
}
With this setup I still get the following message appearing when 'npm run test' runs which shows the babelrc file isn't being hit.
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.
Can anyone help?

So turns out my test was ok in the .babelrc file
{
"env": {
"test": {
"presets": [ "#babel/preset-env" ]
}
}
}
And the script needed in my package.json was this without setting any node env
"scripts": {
"test": "jest --config jest.config.js"
}
It was actually my webpack script that wasn't configured correctly, I needed to add '--env.NODE_ENV=development' at the end
webpack --progress --profile --watch --mode development --env.NODE_ENV=development
Which could then be checked within my webpack.config file.
module.exports = (env) => {
const isDevelopment = env && env.NODE_ENV === 'development';
...
then in my rules test for isDevelopment
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: isDevelopment ? {} : { presets: ['#babel/preset-env'] }
}
},

set NODE_ENV=test causes jest unit test to fail

In my package.json I added "test": "set NODE_ENV=test && jest --watch" to set up my unit tests.
After troubleshooting for a long time to find out why I get this error message:
{import { configure } from 'enzyme';
^
SyntaxError: Unexpected token {
I found that by removing set NODE_ENV=test && I resolve the issue. I am now thinking that it must have something to do with the test config instead:
"babel": {
"env": {
"test": {
"presets": [
[
"next/babel",
{
"preset-env": {
"modules": "commonjs"
}
}
],
"#babel/preset-env"
],
"plugins": [
"transform-es2015-modules-commonjs"
]
}
}
}
Adding "transform-es2015-modules-commonjs" and #babel/preset-env has been suggested in similar posts, but I am not confident it is related to the issue.
I installed cross-env and added it: "test": "cross-env NODE_ENV=test jest --watch" which works perfectly. I am on a windows machine, by the way.
How is cross-env compiling my commands differently than set NODE_ENV=test && jest --watch ??

How to cover React jsx files in Istanbul?

I'm trying to integrate my existing test processes to now include React, but am struggling on the code coverage part. I've been able to get my unit tests working fine by following this project/tutorial - https://github.com/danvk/mocha-react - http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/
I've been using Istanbul to cover my node code and it's working pretty well. However, I'm having trouble getting it to cover the jsx files that I'm using in my tests.
Here's an example of an existing Istanbul task, which also runs fine on vanilla js (node backend code)
var mocha = require('gulp-mocha');
var istanbul = require('gulp-istanbul');
gulp.task('test-api', function (cb) {
gulp.src(['api/**/*.js'])
.pipe(istanbul()) // Covering files
.pipe(istanbul.hookRequire()) // Force `require` to return covered files
.on('finish', function () {
gulp.src(['test/api/*.js'])
.pipe(mocha())
.pipe(istanbul.writeReports()) // Creating the reports after tests runned
.on('end', cb);
My issue ( i think ) is I can't get Istanbul to recognize the jsx files or they're not being compared to what was run in the tests. I tried using the gulp-react module to precompile the jsx to js so it can be used by Istanbul, but I'm not sure if it's working. It's not being covered somehow and I'm not sure where the issue is.
var mocha = require('gulp-mocha');
var istanbul = require('gulp-istanbul');
var react = require('gulp-react');
gulp.task('test-site-example', function (cb) {
gulp.src(["site/jsx/*.jsx"]) //Nothing is being reported by Istanbul (not being picked up)
.pipe(react()) //converts the jsx to js and I think pipes the output to Istanbul
.pipe(istanbul())
.pipe(istanbul.hookRequire()) // Force `require` to return covered files
.on('finish', function () {
gulp.src(['test/site/jsx/*.js'], { //tests run fine in mocha, but nothing being shown as reported by mocha (not covered)
read: false
})
.pipe(mocha({
reporter: 'spec'
}))
.pipe(istanbul.writeReports())
.on('end', cb);
});
;
});
Any ideas what I'm doing wrong? Or any clue on how to integrate a test runner (preferably Istanbul) into a Gulp-Mocha-React project?

Add a .istanbul.yml file to your app root and add .jsx to extensions "extension"...
Here is what I did.
// File .istanbul.yml
instrumentation:
root: .
extensions: ['.js', '.jsx']
To kickstart istanbul and mocha with jsx
$ istanbul test _mocha -- test/**/* --recursive --compilers js:babel/register
This will convert your .jsx files to .js and then istanbul will cover them.
I hope this helps. It worked for me.

There is a library you can take a look at, gulp-jsx-coverage (https://github.com/zordius/gulp-jsx-coverage).

In case someone else is having the same problem and solutions above don't work, I found that adding a simple "-e .jsx" tag worked:
"scripts": {
"start": "meteor run",
"test": "NODE_ENV=test mocha --recursive --compilers js:babel-register --require tests/index.js ./tests/**/*.test.js",
"coverage": "NODE_ENV=test nyc -all -e .jsx npm test"
}
This solution was found at: http://www.2devs1stack.com/react/tape/testing/nyc/coverage/2016/03/05/simple-code-coverage-with-nyc.html

A great tutorial can be found at https://istanbul.js.org/docs/tutorials/es2015/
I just slightly modified it to include react. (I also used 'env' instead of 'es2015', but either should work.) Here are my configurations:
npm i babel-cli babel-register babel-plugin-istanbul babel-preset-env babel-preset-react cross-env mocha nyc --save-dev
.babelrc
{
"presets": ["env", "react"],
"env": {
"test": {
"plugins": [
"istanbul"
]
}
}
}
package.json
"scripts": {
"test": "cross-env NODE_ENV=test nyc mocha test/**/*.spec.js --compilers js:babel-register"
}
"nyc": {
"require": [
"babel-register"
],
"reporter": [
"lcov",
"text"
],
"sourceMap": false,
"instrument": false
}