I have Jest tests in my React project, and I don't have coverage on all files yet. However, I am getting these errors:
Failed to collect coverage from /home/user/Development/VideoManager/VideoManagerClient/src/components/AppContent/VideoListLayout/VideoListLayout.js
ERROR: Cannot read property 'coverageData' of null
STACK: TypeError: Cannot read property 'coverageData' of null
The file being mentioned here does not yet have unit tests created for it. I want it to simply be tracked as lacking coverage and thus bring my whole coverage stats down, rather than throwing an error.
In addition, when I run individual tests in my IDE, my logs get filled with even more of these errors because it's not running the other tests.
How can I fix this?
PS. Here is my Jest configuration:
"jest": {
"collectCoverage": true,
"coverageReporters": [
"html"
],
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
},
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts",
"!src/serviceWorker.js"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/test/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}",
"<rootDir>/test/**/*.{js,jsx,ts,tsx}"
],
"testPathIgnorePatterns": [
"<rootDir>/test/setupTests.js",
"<rootDir>/test/mock/.*",
"<rootDir>/test/exclude/.*"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
"\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
}
I had the exact same issue while using jest version 24.1.0 and babel-jest version 23.6.0.
Solved it by updating babel-jest version to 24.0.0.
Related
I am getting following when running eslint in a Gatsby project
Oops! Something went wrong! :(
ESLint: 7.32.0
[ProjectNotFoundError: File '/home/path_to_project/somefile.ts' doesn't match any project] {
name: 'ProjectNotFoundError',
message: "File '/home/path_to_project/somefile.ts' doesn't match any project"
}
My .eslintrc
{
"extends": [
"react-app",
"plugin:jsx-a11y/recommended",
"prettier",
"plugin:tailwindcss/recommended"
// "airbnb"
],
"plugins": ["jsx-a11y"],
"rules": {
"no-restricted-imports": [
"error",
{
"patterns": ["#/features/*/*"]
}
],
"tailwindcss/classnames-order": "error",
"tailwindcss/no-custom-classname": "error"
},
"settings": {
"tailwindcss": {
"groupByResponsive": true
}
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"processor": "#graphql-eslint/graphql",
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended"
],
"env": {
"es6": true
}
},
{
"files": ["*.graphql"],
"parser": "#graphql-eslint/eslint-plugin",
"plugins": ["#graphql-eslint"],
"rules": {
"#graphql-eslint/no-anonymous-operations": "error",
"#graphql-eslint/naming-convention": [
"error",
{
"OperationDefinition": {
"style": "PascalCase",
"forbiddenPrefixes": ["Query", "Mutation", "Subscription", "Get"],
"forbiddenSuffixes": ["Query", "Mutation", "Subscription"]
}
}
]
}
}
]
}
.eslintignore
node_modules/
.cache/
public/
.idea/
yarn-error.log
.yarn/
Commenting out the following section in .eslintrc fix the issue, but I want to keep that section, things used to work fine with that section before. No clue what's wrong, since the error message provided by ESLint is pretty vague.
{
"files": ["*.ts", "*.tsx"],
"processor": "#graphql-eslint/graphql",
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended"
],
"env": {
"es6": true
}
},
Update
Problem seems to be due to following, since commenting it out fix the error.
"processor": "#graphql-eslint/graphql",
I was earlier using Gatsby's GraphQL Typegen disabled due to it buggy nature (rebuild loop and .cache errors) by commenting out graphql.config.js and removing graphqlTypegen: true, from gatsby-config.ts
According to graphql-eslint
If you are defining GraphQL schema or GraphQL operations in code files, you'll want to define an additional override to extend the functionality of this plugin to the schema and operations in those files.
{
"overrides": [
+ {
+ "files": ["*.js"],
+ "processor": "#graphql-eslint/graphql"
+ },
...
}
It seems, disabling GraphQL Typegen result in mentioned error in "processor": "#graphql-eslint/graphql" of eslint override.
i am using eslint on a typescript project ( for google cloud function ) that use typeOrm.
typeOrm using decorator . the problem is the linter thorw error "Missing JSDoc comment "
on the #Entity decorator......
here is my eslint config
module.exports = {
root: true,
env: {
es6: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"google",
"plugin:#typescript-eslint/recommended",
],
parser: "#typescript-eslint/parser",
parserOptions: {
project: ["tsconfig.json", "tsconfig.dev.json"],
sourceType: "module",
},
ignorePatterns: [
"/lib/**/*", // Ignore built files.
],
plugins: [
"#typescript-eslint",
"import",
],
rules: {
"quotes": ["error", "double"],
"import/no-unresolved": 0,
"new-cap": 0,
},
};
I'm trying to add custom serializer in Jest (with Jest docs). And I have an error: "Module custom-serializer in the snapshotSerializers option was not found.".
I tried custom-serializer.js, but this also doesn't work.
Project structure:
src
...
node_modules
utils
custom-serializer.js
jest.config.json
...
jest.config.json:
{
"verbose": true,
"testEnvironment": "jsdom",
"testMatch": [
"**/tests/**/*.js"
],
"moduleDirectories": [
"node_modules",
"utils"
],
"snapshotSerializers": [
"custom-serializer"
]
}
I have jest tests in my angular project.
I have a package.json file specifying the version of jest I would like to use to run the test. The file includes:
"#types/jest": "^24.0.18",
"jest": "^24.9.0",
"jest-preset-angular": "^7.1.1",
The jest config also includes:
"setupFilesAfterEnv": [
"<rootDir>/setup-jest.ts"
],
This is where the issue occurs. When trying to run jest, I get the following message:
● Validation Warning:
Unknown option "setupFilesAfterEnv" with value ["<rootDir>/setup-jest.ts"] was found.
This is probably a typing mistake. Fixing it will remove this message.
Configuration Documentation:
https://jestjs.io/docs/configuration.html
I had a look at jest -h and found a flag which gives me the setup of the jest environment.
jest --showConfig
This however shows that I am running jest on version
"version": "23.6.0"
So my question lies here. How come after I do an npm i, the jest version trying to run the tests is different / old.
I tried installing jest-cli with the -g flag and the save-dev flag.
Also trying to run tests in VS Code, if thats any help.
Please help.
Thank you in advance.
Full log of npx jest --showConfig
● Validation Warning:
Unknown option "setupFilesAfterEnv" with value ["<rootDir>/setup-jest.ts"] was found.
This is probably a typing mistake. Fixing it will remove this message.
Configuration Documentation:
https://jestjs.io/docs/configuration.html
{
"configs": [
{
"automock": false,
"browser": false,
"cache": true,
"cacheDirectory": "/var/folders/bs/wrvrgl6132df8l5ndxv40m3m0000gn/T/jest_dx",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/",
"setup-jest.ts"
],
"detectLeaks": false,
"detectOpenHandles": false,
"errorOnDeprecated": false,
"filter": null,
"forceCoverageMatch": [],
"globals": {
"ts-jest": {
"tsConfig": "<rootDir>/tsconfig.spec.json",
"stringifyContentPathRegex": "\\.html$",
"astTransformers": [
"jest-preset-angular/InlineHtmlStripStylesTransformer"
]
}
},
"haste": {
"providesModuleNodeModules": []
},
"moduleDirectories": [
"node_modules"
],
"moduleFileExtensions": [
"ts",
"html",
"js",
"json"
],
"moduleNameMapper": [
[
"#app/(.*)",
"/Users/name/Projects/project/src/app/$1"
],
...
],
"modulePathIgnorePatterns": [],
"name": "6caa4...",
"prettierPath": "/Users/name/Projects/project/node_modules/prettier/index.js",
"resetMocks": false,
"resetModules": false,
"resolver": null,
"restoreMocks": false,
"rootDir": "/Users/name/Projects/project",
"roots": [
"/Users/name/Projects/project"
],
"runner": "jest-runner",
"setupFiles": [],
"setupTestFrameworkScriptFile": null,
"skipFilter": false,
"snapshotSerializers": [],
"testEnvironment": "/Users/name/Projects/project/node_modules/jest-environment-jsdom-thirteen/build/index.js",
"testEnvironmentOptions": {},
"testLocationInResults": false,
"testMatch": [
"**/__tests__/**/*.js?(x)",
"**/?(*.)+(spec|test).js?(x)"
],
"testRegex": "",
"testRunner": "/Users/name/node_modules/jest-jasmine2/build/index.js",
"testURL": "http://localhost",
"timers": "real",
"transform": [
[
"^.+\\.(ts|js|html)$",
"/Users/name/Projects/project/node_modules/ts-jest/dist/index.js"
]
],
"watchPathIgnorePatterns": []
}
],
"globalConfig": {
"bail": false,
"changedFilesWithAncestor": false,
"collectCoverage": true,
"collectCoverageFrom": null,
"coverageDirectory": "/Users/name/Projects/project/coverage",
"coverageReporters": [
"json",
"text",
"lcov",
"clover"
],
"coverageThreshold": null,
"detectLeaks": false,
"detectOpenHandles": false,
"errorOnDeprecated": false,
"expand": false,
"filter": null,
"globalSetup": null,
"globalTeardown": null,
"listTests": false,
"maxWorkers": 7,
"noStackTrace": false,
"nonFlagArgs": [],
"notify": false,
"notifyMode": "always",
"passWithNoTests": false,
"projects": null,
"rootDir": "/Users/name/Projects/project",
"runTestsByPath": false,
"skipFilter": false,
"testFailureExitCode": 1,
"testPathPattern": "",
"testResultsProcessor": null,
"updateSnapshot": "new",
"useStderr": false,
"verbose": null,
"watch": false,
"watchman": true
},
"version": "23.6.0"
}
Showing npm config get log here too:
; cli configs
metrics-registry = "http://.../.../npm-group/"
scope = ""
user-agent = "npm/6.9.0 node/v10.15.3 darwin x64"
; project config /Users/user/Projects/project/.npmrc
registry = "http://.../.../npm-group/"
; node bin location = /Users/user/.nvm/versions/node/v10.15.3/bin/node
; cwd = /Users/user/Projects/project
; HOME = /Users/user
; "npm config ls -l" to show all defaults.
I had the same issue, after a long search I've tried this:
type jest
Which gave me the location:
/usr/local/bin/jest
Renaming this file (or deleting it), solved the problem (note that now running jest will give command not found).
Within a node app where I'm using Jest to test client side code (testEnvironment: 'jsdom') and server side code (testEnvironment:'node') as well collecting code coverage for both client and server side.
Currently I'm using 4 Jest config files with lots of redundant configuration to accomplish this.
client
{
"bail": true,
"verbose": true,
"notify": true,
"scriptPreprocessor": "./node_modules/babel-jest",
"testPathIgnorePatterns": [
"./node_modules",
"./coverage",
"./dist",
"./build"
],
"testRegex": "\\.test\\.js"
}
client coverage
{
"bail": true,
"verbose": true,
"notify": true,
"scriptPreprocessor": "./node_modules/babel-jest",
"testPathIgnorePatterns": [
"./node_modules",
"./coverage",
"./dist",
"./build"
],
"testRegex": "\\.test\\.js",
"collectCoverageFrom": ["**/*.js", "!**/node_modules/**"],
"collectCoverage": true,
"coverageDirectory": "./coverage",
"coveragePathIgnorePatterns": [
"./node_modules",
"./coverage",
"./dist",
"./build",
"./test"
],
"coverageThreshold": {
"global": {
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
}
}
}
server
{
"bail": true,
"verbose": true,
"notify": true,
"scriptPreprocessor": "./node_modules/babel-jest",
"testPathIgnorePatterns": [
"./node_modules",
"./coverage",
"./dist",
"./build"
],
"testRegex": "\\.test\\.js",
"testEnvironment": "node"
}
server coverage
{
"bail": true,
"verbose": true,
"notify": true,
"scriptPreprocessor": "./node_modules/babel-jest",
"testPathIgnorePatterns": [
"./node_modules",
"./coverage",
"./dist",
"./build"
],
"testRegex": "\\.test\\.js",
"testEnvironment": "node",
"collectCoverageFrom": ["**/*.js", "!**/node_modules/**"],
"collectCoverage": true,
"coverageDirectory": "./coverage",
"coveragePathIgnorePatterns": [
"./node_modules",
"./coverage",
"./dist",
"./build",
"./test"
],
"coverageThreshold": {
"global": {
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
}
}
}
How can I achieve this without repeating my configuration 4 times? I've looked at the preset configuration option. Using that I have to create a separate package for each configuration. Is that the recommended way?
Yes, you could define shared jest.config.js
and reuse it in your specific configs:
It's nice to use <rootDir> in all paths in your shared config, so those could be reused too.
client/jest.config.js
const sharedConfig = require('../jest.config.js');
module.exports = {
...sharedConfig,
'rootDir': './',
}
server/jest.config.js
const sharedConfig = require('../jest.config.js');
module.exports = {
...sharedConfig,
'rootDir': './',
"testEnvironment": "node"
}
You could also reuse jest defaults if needed: Jest Documentation - Configuring Jest
Yes, since Jest v20 you can define config as a JS file and use it to share common parts of the similar configs. Docs on configuring Jest.
By default Jest looks up for:
jest.config.js
"jest" entry in package.json
...and treats the parent directory as a rootDir.
Also be sure to check out the projects option, which makes it easier to run Jest inside monorepos (e.g. client + server code in one codebase). See this answer for reference: Testing two environments with jest