Related
I have created a NX plugin/lib named nx.
The plugin's package.json defines the linting target:
"lint": {
"executor": "#nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": [
"libs/nx/executors.json",
"libs/nx/package.json",
"libs/nx/src/executors",
"libs/nx/src/generators"
]
}
}
The .eslintrc.json is:
{
"extends": ["../../.eslintrc.json"],
"ignorePatterns": ["!**/*"]
}
The extended .eslintrc.json is:
{
"root": true,
"ignorePatterns": ["**/*"],
"plugins": ["#nrwl/nx"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {
"#nrwl/nx/enforce-module-boundaries": [
"error",
{
"enforceBuildableLibDependency": true,
"allow": [],
"depConstraints": [
{
"sourceTag": "*",
"onlyDependOnLibsWithTags": ["*"]
}
]
}
]
}
},
{
"files": ["*.ts", "*.tsx"],
"extends": ["plugin:#nrwl/nx/typescript"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"extends": ["plugin:#nrwl/nx/javascript"],
"rules": {}
},
{
"files": "*.json",
"parser": "jsonc-eslint-parser",
"rules": {}
}
]
}
The problem is that the generator dir contains templates for generating ts apps and each app has its own .eslintrc.json file. So when I run linting for some reason it parses these files resulting in an error:
Failed to load config "../../.eslintrc.base.json" to extend from.
Referenced from:
[...]/libs/nx/src/generators/application/template/.eslintrc.json
I tried to update the ignorePatterns of my config
{
"ignorePatterns": ["!**/*", "**/*.eslintrc.json"]
}
but without success. How can I solve this problem?
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 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.
I have a project using react-parcel-app as a template, and I'm trying to integrate Jest but I'm having the following error.
Details:
/home/papaponmx/Projects/prime/src/actions/goals.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { addGoal } from './goals.mjs';
This is what my .babelrc looks like.
{
"presets": [
[
"env",
{"modules": false},
{
"targets": {
"browsers": [
"last 2 versions"
]
}
}
],
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
],
"env": {
"testing": {
"presets": ["es2015", "stage-1", "react" ],
"plugins": [
"lodash",
"transform-runtime",
"transform-es2015-modules-commonjs",
"dynamic-import-node"
]
}
}
}
I understand that parcel is supposed to support ES Modules without configuration, but I don't get the test import s to work.
Here is the link to the repo in case you want to run it locally.
By the help of this article i come to a solution using babel.
Install these packages as dev dependencies:
npm i --save-dev babel-jest #babel/core #babel/preset-env
In the root level of your project, create a .babelrc file and add the following:
{presets:["#babel/preset-env"]}
Then you can use ES6 imports in your test files
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