Inconsistent NYC coverage report - babeljs

All of a sudden, I'm getting very inconsistent nyc coverage reports, locally, and running in CI with Travis.
When running NYC, it fails locally, and nearly passes on Travis.
More details and config:
package.json bits:
"scripts": {
"build": "webpack --mode production",
"lint": "eslint src/",
"test": "nyc mocha --exit --forbid-only",
"verify": "npm run lint && npm run test && npm run build"
},
"dependencies": {
"core-js": "^3.26.1",
},
"devDependencies": {
"#babel/core": "^7.20.5",
"#babel/plugin-transform-runtime": "^7.19.6",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#babel/register": "^7.18.9",
"babel-loader": "^9.1.0",
"babel-plugin-istanbul": "^6.1.1",
"mocha": "^10.2.0",
"nyc": "^15.1.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
babel.config.json
{
"compact": false,
"env": {
"test": {
"plugins": [
"istanbul"
]
}
},
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": "3.26"
}
],
[
"#babel/preset-react",
{
"runtime": "automatic"
}
]
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}
.nycrc.json
{
"all": true,
"check-coverage": true,
"branches": 100,
"exclude": [
"src/constants/**/*.js",
"src/theme/*.js"
],
"functions": 100,
"include": [
"src/**/*.js"
],
"lines": 100,
"reporter": [
"html",
"text"
],
"statements": 100
}
.mocharc.json
{
"file": [
"./test/testUtils/setupTests.js"
],
"require": [
"#babel/register",
"core-js/stable",
"global-jsdom/register",
"regenerator-runtime/runtime"
],
"recursive": true
}
Problems:
When running locally, I see branches failing across a ton of files for the ELSE path not taken for the last import in a lot of files
When running on Travis, I have files with /* istanbul ignore file */ that are getting flagged for coverage (not honoring the ignore), but do not have the problem mentioned in 1
I've scoured the internet and tried different configurations. I also tried to use C8 instead of NYC, and get C8 passing locally, but it fails miserably on the server

Related

yo #theia/plugin gives error TS1005 ',' expected and others

I was looking for developing my own theia plugin. First, I want to try the simple "Hello World" plugin with the command yo #theia/plugin.
Yeoman command to generate Theia plugin
I develop with Ubuntu 20.04. I get many TypeScript errors as we can see in the following image.
Errors with yeoman commands
I tried to figure out by myself. I installed many tsc versions, but nothing worked. I've readed the Prerequisites first and installed every dependencies.
I understand that the TypeScript version may not be the good one, but not sure which one and why.
Here are some versions I use:
yarn: 1.22.19
node: v16.14.2
tsc: 3.1.3
Here is the tsconfig file that was autogenetared with yo command:
{
"compilerOptions": {
"strict": true,
"experimentalDecorators": true,
"noUnusedLocals": true,
"emitDecoratorMetadata": true,
"downlevelIteration": true,
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"lib": [
"es6",
"webworker"
],
"sourceMap": true,
"rootDir": "src",
"outDir": "lib",
"skipLibCheck": true
},
"include": [
"src"
]
}
Here is the package.json:
{
"name": "hello",
"publisher": "theia",
"keywords": [
"theia-plugin"
],
"version": "0.0.1",
"license": "none",
"files": [
"src"
],
"activationEvents": [
"*"
],
"devDependencies": {
"#theia/plugin": "next",
"#theia/plugin-packager": "latest",
"rimraf": "2.6.2",
"typescript-formatter": "7.2.2",
"typescript": "3.5.3"
},
"scripts": {
"prepare": "yarn run clean && yarn run build",
"clean": "rimraf lib",
"format-code": "tsfmt -r",
"watch": "tsc -watch",
"compile": "tsc",
"build": "yarn run format-code && yarn run compile && theia-plugin pack"
},
"engines": {
"theiaPlugin": "next"
},
"theiaPlugin": {
"backend": "lib/hello-backend.js"
}
}
I changed nothing from the yo command
I am a little lost as why it happens. Can everyone help me out?
I was expecting the yo and yarn commands to be successful.

ESLint running in terminal but doesn't pick up error

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"
]
}

Parse error Unexpected token '�' at 1:1 ��{ on flutter app when running firebase deploy

encounter the below message when trying to firebase deploy from root project
Error: Parse Error in ...\firestore.indexes.json
Unexpected token '�' at 1:1
��{
I have a flutter app, upon which I also have a functions folder. Below is the file position:
AppFolder
functions
.eslintrc.js
index.js
package.json
etc
lib
files relative to flutter app
test
test files relative to flutter app
web firestore.indexes.json
firebase.json
etc
I am running on windows 11 in a newly built pc (so maybe sth is missing?), other devs are running on mac, I have changed the EOF sequence to LF on the 3 files of the functions folder, I have also run these two commands inside the functions folder
npm install firebase-functions#latest firebase-admin#latest --save
npm install -g firebase-tools
npm version is 8.1.2
node version is v16.13.1
firestore.indexes.json is:
{
"indexes": [
{
"collectionGroup": "something1",
"queryScope": "COLLECTION",
"fields": [
{
"fieldPath": "created",
"order": "DESCENDING"
},
{
"fieldPath": "something2",
"order": "DESCENDING"
}
]
},
{
"collectionGroup": "something3",
"queryScope": "COLLECTION",
"fields": [
{
"fieldPath": "something4",
"order": "ASCENDING"
},
{
"fieldPath": "something5",
"order": "DESCENDING"
}
]
}
],
"fieldOverrides": []
}
.elslint.js is
module.exports = {
"root": true,
"env": {
es6: true,
node: true,
},
"extends": [
"eslint:recommended",
"google",
],
"rules": {
quotes: ["error", "double"],
},
"parserOptions": {
"ecmaVersion": 2020,
},
};
and package.json is
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"lint": "eslint .",
"serve": "firebase emulators:start --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "14"
},
"main": "index.js",
"dependencies": {
"axios": "^0.24.0",
"device-detector-js": "^3.0.0",
"firebase": "^9.2.0",
"firebase-admin": "^10.0.1",
"firebase-functions": "^3.16.0"
},
"devDependencies": {
"eslint": "^8.1.0",
"eslint-config-google": "^0.14.0",
"firebase-functions-test": "^0.3.3"
},
"private": true
}
Please keep in mind that in an older pc running windows 10 and I can deploy by changing only to the LF and running the above commands.
Just try to make a new text file and copy the content of generated file inside the new one. Then override the new file with firestore.indexes.json
Its obvious that the generated json file has some formatting problem.
I recently had this problem and found that it was resolved by changes to the firebase.json file:
Seek "predeploy":
Delete the code so that the outcome is "predeploy": []
After this, run the firebase deploy function again, and everything should be fine.
Thank you to Max for sharing this solution with me : )

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.

Babel : As of v7.0.0-beta.55, we've removed Babel's Stage presets

I'm trying to create a build for this project but I've faced this issue with babel :
Error: [BABEL] D:\open-source\React\react-notify\src\components\Notification\Action\index.js:
As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
long run to explicitly add which proposals to use.
For a more automatic migration, we have updated babel-upgrade,
https://github.com/babel/babel-upgrade to do this for you with
"npx babel-upgrade".
If you want the same configuration as before:
{
"plugins": [
// Stage 2
["#babel/plugin-proposal-decorators", { "legacy": true }],
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-throw-expressions",
// Stage 3
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
["#babel/plugin-proposal-class-properties", { "loose": false }],
"#babel/plugin-proposal-json-strings"
]
}
If you're using the same configuration across many separate projects,
keep in mind that you can also create your own custom presets with
whichever plugins and presets you're looking to use.
module.exports = function() {
return {
plugins: [
require("#babel/plugin-syntax-dynamic-import"),
[require("#babel/plugin-proposal-decorators"), { "legacy": true }],
[require("#babel/plugin-proposal-class-properties"), { "loose": false }],
],
presets: [
// ...
],
};
};
my package.json:
{
"name": "react-notify",
"version": "0.1.0",
"description": "Push notification component for React",
"main": "dist/index.js",
"module": "dist/index.js",
"babel": {
"presets": [
"#babel/react",
"#babel/env",
"#babel/stage-2"
]
},
"license": "MIT",
"dependencies": {
"#babel/runtime": "^7.11.2",
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-brands-svg-icons": "^5.14.0",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-fontawesome": "^0.1.11",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"styled-components": "^5.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/Notification --out-dir dist --copy-files",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"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"
]
},
"resolutions": {
"styled-components": "^5"
},
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#babel/preset-stage-2": "^7.8.3",
"#storybook/addon-actions": "^6.0.21",
"#storybook/addon-essentials": "^6.0.21",
"#storybook/addon-links": "^6.0.21",
"#storybook/node-logger": "^6.0.21",
"#storybook/preset-create-react-app": "^3.1.4",
"#storybook/react": "^6.0.21",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.4",
"enzyme-to-json": "^3.5.0",
"react-addons-test-utils": "^15.6.2",
"react-is": "^16.13.1",
"react-test-renderer": "^16.13.1"
}
}
I tried :
npx babel-upgrade
But still facing the same issue.
My Action/index.js:
import React, { useContext } from "react"
import PropTypes from "prop-types"
import { Button, Wrapper } from "./Styled"
import Context from "../context"
const Action = ({ name, onClick }) => {
const { type } = useContext(Context);
if (!(typeof onClick === "function")) {
throw new Error("Action event should be a function")
}
return (< Wrapper >
<Button type={type} onClick={onClick}>{name}</Button>
</Wrapper >)
}
Action.propTypes = {
name: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired
}
export default Action
Why I faced this issue?
Babel had stopped supporting Stage Presets in the configuration. Read this article.
How to solve the issue?
By running this command :
npx babel-upgrade
Then:
npm install
This will replace the legacy dependencies with :
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
}
And replace the configuration with :
"babel": {
"presets": [
"#babel/react",
"#babel/env"
]
},