5

I am facing a strange issue with lint-staged plugin. It was working fine earlier.

So the issue is when I run npm run test it generates the coverage report.

"test": "cross-env CI=true react-scripts test --coverage",

enter image description here

But when I run the same command with husky pre-commit and lint-staged it is not working. When I checked the console I found that it is running against the file which has been modified.

> portal@0.1.0 test /Users/carlos/Desktop/portal
> cross-env CI=true react-scripts test --coverage "/Users/carlos/Desktop/portal/src/container/Auth/Login.page.js"

No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In /Users/carlos/Desktop/portal
44 files checked.
testMatch: /Users/carlos/Desktop/portal/src/**/__tests__/**/*.{js,jsx,ts,tsx}, /Users/carlos/Desktop/portal/src/**/*.{spec,test}.{js,jsx,ts,tsx} - 6 matches
testPathIgnorePatterns: /node_modules/ - 44 matches
testRegex:  - 0 matches
Pattern: /Users/carlos/Desktop/portal/src/container/Auth/Login.page.js - 0 matches
npm ERR! code ELIFECYCLE
npm ERR! errno 1

There is a noticeable difference

When I run

npm run test it runs with

cross-env CI=true react-scripts test --coverage

and when npm run test being called by husky and lint-staged

it's called with cross-env CI=true react-scripts test --coverage "/Users/carlos/Desktop/portal/src/container/Auth/Login.page.js"

There is file path getting appended after --covrage

Here is my package JSON config.

"jest": {
    "collectCoverageFrom": [
      "src/**/*.js"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 80,
        "functions": 80,
        "lines": 80,
        "statements": 80
      }
    }
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "husky": {
      "hooks": {
        "pre-commit": "lint-staged"
      }
    },
  "lint-staged": {
      "*.js": [
        "prettier --write",
        "eslint src/ --fix",
        "npm run test",
        "git add"
      ]
   }

Note: This is happing when I use lint-staged only if I use the pre-commit:npm run test it is working fine.

Jitender
  • 7,593
  • 30
  • 104
  • 210

1 Answers1

6

Jest is trying to run the files on your staging area, that's why it's appending some file paths.

What you need is --findRelatedTests:

"lint-staged": {
  "*.js": [
    "prettier --write",
    "eslint --ext .js --fix",
    "jest --bail --findRelatedTests"
  ]
}

--findRelatedTests Will look for test files that requires/imports the files passed as arguments (in the case of lint-staged, the files on your staging area). You can read more about how it works here.

From the documentation:

Find and run the tests that cover a space separated list of source files that were passed in as arguments. Useful for pre-commit hook integration to run the minimal amount of tests necessary. Can be used together with --coverage to include a test coverage for the source files, no duplicate --collectCoverageFrom arguments needed.

Daniel Sousa
  • 116
  • 7
  • How does the --bail fix this problem? – Jitender Sep 15 '19 at 11:39
  • 2
    --bail is just a conveniece that a I like to use with lint-staged. This makes Jest to stop immediately after one failling test suite, so you don't have to wait for all your tests to run before getting a feedback. Actually, what solves your problem is --findRelatedTests. I've added an explanation to the answer. – Daniel Sousa Sep 16 '19 at 14:13
  • Glad to help =D @ViníciusPachecoVieira – Daniel Sousa Jan 08 '20 at 21:46
  • 1
    @DanielSousa Would it matter if I place `jest --bail --findRelatedTests` to the end of the list of 4 commands? – ypahalajani Aug 24 '20 at 11:27
  • @ypahalajani Actually lint-staged now runs "git add" for you, so you don't need it anymore. I've updated the example running jest last. – Daniel Sousa Aug 31 '20 at 18:04