ESLint running in terminal but doesn't pick up error - visual-studio-code

I'm following a tutorial using create-react-app and configuring ESLint.
I already installed ESLint globally, I have a .eslintrc.json file in the root folder and .vscode/settings.json
Current problem:
After configuring, ESLint Output runs normally but didn't pick up any error from my code.
Ex: When I hover over .textContent, it supposed to have a suggestion to use .toHaveTextContent instead:
I tried restarting VSCode, uninstalling ESLint extension and installing it again but still - doesn't work and no error in the Output.
Screenshots & Code:
File tree:
ESLint Output:
.eslintrc.json
{
"plugins": [
"testing-library",
"jest-dom"
],
"extends": [
"react-app",
"react-app/jest",
"plugin:testing-library/react"
]
}
.vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll": true
},
}
package.json
{
"name": "color-button",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-plugin-jest-dom": "^4.0.1",
"eslint-plugin-testing-library": "^5.5.0"
}
}

It turns out I haven't added "plugin:jest-dom/recommended" rule in my .eslintrc.json file.
That's why it didn't pick up error with jest-dom's syntax :)
Fixed this:
{
"plugins": [
"testing-library",
"jest-dom"
],
"extends": [
"react-app",
"react-app/jest",
"plugin:testing-library/react",
"plugin:jest-dom/recommended"
]
}

Related

Trying to deploy my react app to github, but having some errors when running it

I am trying to deploy my react app to github, but when i'm running npm run deploy i'm getting the below error message
remote: Permission to aneagoie/robofriends.git denied to Moshe844.
fatal: unable to access 'https://github.com/aneagoie/robofriends.git/': The requested URL returned error: 403
can you please help me with getting this resolved?
package.json
{
"name": "robofriends",
"homepage": "https://Moshe844.github.io/robofriends",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"gh-pages": "^4.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"tachyons": "^4.12.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"react-error-overlay": "^6.0.11"
}
}

Prettier throwing error in VScode fresh CRA app installation

I installed a fresh install of CRA and also installed eslint and prettier and as well as two packages to make them work smoothly with each other.
Eslint is working and active but prettier is not formatting. I get the following error in the terminal:
Error: Failed to load plugin 'react' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''
Package.json:
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"prettier"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.1",
"prettier": "^2.7.1"
}
}

Could not find a declaration file for module 'react-map-gl-geocoder'

Hi I am trying to use Mapbox geocoder for my react-project. I am always getting those two errors.
Could not find a declaration file for module 'react-map-gl-geocoder'. 'Git/react-excercises/node_modules/react-map-gl-geocoder/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev #types/react-map-gl-geocoder if it exists or add a new declaration (.d.ts) file containing declare module 'react-map-gl-geocoder';ts(7016)
./node_modules/react-map-gl-geocoder/dist/index.m.js
Attempted import error: 'FlyToInterpolator' is not exported from 'react-map-gl' (imported as 'r').
This is my package.json
{
"name": "react-excercises",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"mapbox": "^1.0.0-beta10",
"mapbox-gl": "^2.7.0",
"mapbox-gl-geocoder": "^2.0.1",
"prop-types": "^15.8.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-icons": "^4.3.1",
"react-map-gl": "^7.0.9",
"react-map-gl-geocoder": "^2.2.0",
"react-mapbox-gl-geocoder": "^1.1.0",
"react-scripts": "4.0.3",
"reactstrap": "^9.0.1",
"styled-components": "^5.3.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Set up testing-library/react with mocha got SyntaxError: Unexpected token

I am setting up testing-library/react with mocha. Faced a lot of problems on the setup that were resolved by installing babel libraries and configuring them in .babelrc file as explained on the bottom most part of this question. Now, I am stuck on this error:
> mocha --exit --require #babel/register --require jsdom-global/register
D:\projects\demo_app\node_modules\antd\es\row\index.js:1
(function (exports, require, module, __filename, __dirname) { import { Row } from '../grid';
^
SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
This comes from ant.design component which uses the syntax above. I have tried to test a dummy component like below:
const component = () => (<div>hello</div>)
And it has no problem. But whenever I import my real component that I need to test that is using ant design, I get the error above.
Is it setup part for babel not configured properly? I have no idea how to fix the error. Somehow have a guess that it might be related to babel presets or plugins.
P.S. My project is using Create React App, the exact same test runs smoothly with Jest, but for some reason I don't want to use jest.
Below is .babelrc
{
"presets": [
["#babel/preset-env",
{
"targets": {
"esmodules": true,
"node": "current"
}
}
],
["#babel/preset-react"]
],
"plugins": [
["#babel/plugin-proposal-class-properties"],
["module-resolver", {
"root": ["./src"],
"alias": {
"underscore": "lodash"
}
}]
]
}
Below is package.json
{
"dependencies": {
"antd": "^4.4.2",
"axios": "^0.19.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-google-oauth": "^1.0.0",
"react-icons": "^3.10.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"styled-components": "^5.0.1",
"validator": "^13.1.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "mocha --exit --require #babel/register --require jsdom-global/register",
"test:jest": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "7.12.9",
"#babel/plugin-proposal-class-properties": "7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "7.12.7",
"#babel/register": "7.12.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"babel-eslint": "10.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"chai": "4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint-plugin-flowtype": "^3.13.0",
"eslint-plugin-import": "^2.20.1",
"husky": "^4.2.1",
"jsdom": "^16.4.0",
"jsdom-global": "^3.0.2",
"mocha": "8.2.1",
"msw": "^0.19.5",
"react-test-renderer": "^16.13.1",
"redux-mock-store": "^1.5.4",
"standard": "^14.3.1"
},
"optionalDependencies": {
"fsevents": "^2.1.2"
},
"standard": {
"parser": "babel-eslint",
"ignore": [
"/public"
]
},
"jest": {
"transformIgnorePatterns": [
"node_modules/?!(react)/"
]
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
}
Any help would be appreciated.
You have "esmodules": true which forces Babel to use ES modules. That means that if you're using Node, it needs to support ES modules, and you either need to have your tests in .mjs files or have "type": "module" in package.json. If this isn't supported or you want to support older Node versions, remove "esmodules": true from your Babel config to enable compatibility with CJS modules.

VS Code Mocha debug errors out on ES6 code

I'm trying to debug my tests for my React Redux app in VS Code.
Running my tests in Jest works great, but the when I run the debugger I get this error:
(function (exports, require, module, __filename, __dirname) { import * as actions from "../src/redux/actions/tasksActions";
^^^^^^
SyntaxError: Unexpected token import
I'm using the following configuration in my launch.json:
{
"type": "node",
"request": "launch",
"name": "Mocha Tests",
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
"args": [
"--require #babel/register",
"--inspect-brk",
"-u",
"tdd",
"--timeout",
"999999",
"--colors",
"${workspaceFolder}/tests"
],
"internalConsoleOptions": "openOnSessionStart"
}
The first args in the config, "--require #babel/register", "--inspect-brk", came from suggestions on blogs I found while googling my error (the first arg was said to fix this exact error). Same error happens, though, with or without either of those args.
Here's my package.json if it helps.
{
"name": "client",
"version": "0.1.0",
"private": true,
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.4",
"#babel/node": "^7.2.2",
"#babel/preset-env": "^7.4.4",
"#babel/register": "^7.4.4",
"babel-jest": "^24.7.1",
"chai": "^4.2.0",
"enzyme": "^3.9.0",
"expect": "^24.7.1",
"jest": "^24.7.1",
"jsdom": "^15.0.0",
"mocha": "^6.1.4",
"react-addons-test-utils": "^15.6.2",
"react-scripts": "0.7.0"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"redux": "^4.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"test:watch": "npm test -- --watch",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Any ideas? Thanks!