I want to display code coverage for testing React in Cypress
The package.joson look like this
{
"name": "guitesttraining",
"version": "0.1.0",
"private": true,
"jest": {
"collectCoverageFrom": [
"src/components/**/*.js"
],
"coverageReporters": [
"cobertura",
"text"
]
},
"dependencies": {
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"jest-junit": "^13.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"serverless-finch": "^4.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts -r #cypress/instrument-cra start",
"build": "react-scripts build",
"test": "react-scripts test --coverage --reporters=default --reporters=jest-junit",
"eject": "react-scripts eject",
"cypress:run": "cypress run --record --key 3339aabe-1bcc-4f8c-8098-d08f47ac0b9b",
"postcypress:run": "npx nyc report --reporter=cobertura",
"cypress:open": "cypress open"
},
"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": {
"#cypress/code-coverage": "^3.9.12",
"#cypress/instrument-cra": "^1.4.0",
"#testing-library/cypress": "^8.0.2",
"#testing-library/jest-dom": "^5.16.2",
"cypress": "^9.5.2",
"cypress-jest-adapter": "^0.1.1",
"nyc": "^15.1.0"
}
}
The cypress/support/index.js
import './commands'
import 'cypress-jest-adapter'
import '#testing-library/cypress/add-commands'
import '#cypress/code-coverage/support'
The cypress/pluging/index.js
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config)
return config
}
After I have executed run start "react-scripts -r #cypress/instrument-cra start"
Console do not contain window.coverage object in the "Application under test iframe"
When I run npm run cypress:run I get a error message
- should toggel display and hide of details ⚠️ file /Users/steinko/development/cypresstaining/webtestingtraining/.nyc_output/out.json
has no coverage information Did you forget to instrument your web
application? Read
https://github.com/cypress-io/code-coverage#instrument-your-application
What must I do to instrument the web application?
I toght that running react-scripts -r #cypress/instrument-cra start instrumeneted the web application
I found a issue, instrument-cra still does not support react-scripts v5. After I try react-scripts v4.0.3, it does not work also.
Related
I need some help with my React project. I can't compile any JSX and I'm completely lost on what to do. Currently this is the error when trying to compile:
I've tried deleting my package.json and node_modules folder and then running npm install. Nothing seems to work. I've tried completely removing node.js and everything relating to it and npm and reinstalling everything. I'm completely lost on what to do. I'm currently running WebStorm if that helps.
package.json:
{
"name": "tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.27.2",
"babel": "^6.23.0",
"#babel/preset-react": "7.18.6",
"eslint": "8.22.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"react-table": "^7.8.0",
"styled-components": "^5.3.5"
},
"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"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"author": "",
"license": "ISC",
"devDependencies": {
"eslint-config-react-app": "^7.0.1"
}
}
I have a babel.config.js in the src directory:
module.exports = {
"presets": ["#babel/preset-env", "#babel/preset-react"]
};
I created a react project with create-react-app some times ago and i wanted to add some test with jest. I read that Jest comes with create-react-app, but when i try to run the simple test that comes with the project by typing "yarn test", i have this error message: TypeError: (0 , _react2.test) is not a function
The test:
import React from 'react';
import { render, screen, expect, test} from '#testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
The result:
My package.json
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --ext .js,.jsx",
"lint-fix": "npm run lint -- --fix"
},
"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": {
"eslint": "^7.28.0",
"eslint-plugin-react": "^7.24.0"
}
}
Does anyone know what i am missing ? Thank you !
whenever I deploy my react app to github pages it is showing the following error.
Your site is having problems building: Unable to build page. Please try again later
It was working fine even a week ago. This is the code of my package.JSON file
{
"name": "todolist",
"homepage": "https://srijit2002.github.io/todoapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"gh-pages": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
},
"devDependencies": {
"sass": "^1.32.13"
}
}
First I install,
npx create-react-app amazon-clone
then I want to start. so I type
npm start
but I get an error.
my JSON file adds below.
{
"name": "amazon-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#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"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "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"
]
}
}
why I am getting the error??
I see many stackoverflow answer but didn't get the point
I think you forgot to change the directory. Follow the steps below.
npx create-react-app amazon-clone
cd amazon-clone
npm start
I'm stuck with this error below:
Failed to compile ./node_modules/#material-ui/core/ButtonBase/ButtonBase.js Module not found: Can't resolve '#babel/runtime/helpers/builtin/assertThisInitialized' in 'E:\IT\the-venue\node_modules#material-ui\core\ButtonBase'
Since the problem has to do something with Babel I've installed the latest version coming from Babel's website (https://babeljs.io/setup#installation).
I've only done it until step 2, because the step 3 requires 'react' replacement with 'babel'in the 'scripts' section ('build' line) and I am not sure if I should do this.
Here is my package.json
{
"name": "the-venue",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^1.2.0",
"#material-ui/icons": "^1.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-reveal": "^1.2.2",
"react-scripts": "3.0.1",
"react-scroll": "^1.7.9",
"react-slick": "^0.23.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "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/cli": "^7.5.5",
"#babel/core": "^7.5.5"
}
}
I am working with Material UI and the expected result is the webpage with the header from Material UI (App Bar).
Would anyone explain what the problem is and help me solve it, please ?
npm install #material-ui/core#latest #material-ui/icons#latest react-reveal#1.2.2 react-scroll#1.7.9 react-slick#0.23.1
Do this and get the latest version of material-ui/core & material-ui/icons.
This will solve your problem.