Why Istanbul Is Not Working After Cloning A Repo

I got a new laptop. I installed the latest Node.js and cloned a repo to keep continuing with my React project. I ran npm i to install all dependencies. The app started fine and built fine. However, when I ran npm test, the test was not running.

My test script was this:

nyc --reporter=html --reporter=text mocha -r ts-node/register -r jsdom-global/register ^
-r unitTestSetup.ts **/tests/**/*.ts  --recursive --timeout 5000

The error message was this:

internal/modules/cjs/loader.js:800
    throw err;
    ^
Error: Cannot find module 'C:\Users\takah\Projects\my-to-do-app-typescript-react-hooks\node'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
    at Function.Module._load (internal/modules/cjs/loader.js:690:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

After a little bit of investigation, I realised that Istanbul (nyc) was not working for some reason. The module was used for test coverage.

I actually struggled to solve this issue, but in the end I worked out that I needed to upgrade the version of nyc. The version of nyc was 13.3.0. So I uninstalled module and reinstalled it. This upgraded nyc to 15.0.0.

npm uninstall nyc
npm i --save-dev nyc

For some reason, the older version of nyc is not compatible with the newer version of node and npm. If you are having the same issue with running nyc, just upgrade it. It will start running again.

It took me a while to resolve this. Hopefully this post saves you a bit of time troubleshooting the same problem I had!

Front-End
Learning CSS Grid

CSS Grid can be scary. It looks complicated and you might not even know where to start. If you want to get started quickly with CSS grid, I highly recommend Grid Garden. It an interactive learning module for CSS grid. It covers a lot of important concepts about CSS grid. …

Front-End
How to Make Scalable SVG React Components

SVG stands for Scalable Vector Graphic. The svg image can scale up and down according the size of the outer container as long as the image width is set to 100%. Let’s explore how we can make a React illustration component that supports multiple size by scaling up and down. …

Front-End
Using act() in Jest Unit Tests with React-Dom

react-dom/test-utils provides a helper, act() to make sure all the tasks like rendering, user events, and data fetching (these are considered as units of interaction with a user interface) to be processed and applied to the DOM before making an assertion. We use act() when we are using jest with …