cypress-io / instrument-cra Goto Github PK
View Code? Open in Web Editor NEWLittle module for CRA applications to instrument code without ejecting react-scripts
License: MIT License
Little module for CRA applications to instrument code without ejecting react-scripts
License: MIT License
How do I add -r @cypress/instrument-cra
in "start"? According to the documents given here we need react-scripts
but in my use case I don't have it.
I have this:-
"start": "node index.js",
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
react
, react-dom
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
react
, react-dom
).circleci/config.yml
cypress 1.26.0
package.json
babel-plugin-istanbul 6.0.0
debug 4.2.0
find-yarn-workspace-root ^2.0.0
@cypress/code-coverage 3.4.2
check-code-coverage 1.10.0
cypress 6.5.0
prettier 2.1.2
react 17.0.1
react-dom 17.0.1
react-scripts 3.3.1
semantic-release 17.2.1
start-server-and-test 1.11.5
because there are outside contributions
Hi, my question is about integrating your package into react-scripts process.
I've looked through the react-scripts code, but I didn't find any notice about the -r
argument, that your package relies on.
So, I have some considerations, whether your decision to use that flag is more reliable, than to use react-app-rewired with customize-cra and separate babelrc config.
Also, could you, please, tell me, where exactly did you find that flag?
Hello,
I have a fresh React app scaffolded using create-react-app
(CRA) for the purposes of testing how to generate coverage reports using cypress.
I created a new first component called List.js
in src
folder and I generated a coverage report, however I don't see it this component listed in the report (see attached images). The only time it is included in the coverage report is when I imported 'List.js
component into index.js
or App.js
, otherwise it's not in the report (See images).
In one of Gleb's videos, you can see for example serviceWorker.js
file showing in the report https://youtu.be/y8StkffYra0?t=154. So in a similar way, I am expecting all JS files in src
folder to be part of the report by default unless I somehow exclude them.
This is how my package.json looks like:
....
"scripts": {
"start": "react-scripts -r @cypress/instrument-cra start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"cypress:wait": "start-server-and-test start http://localhost:3000",
"cypress:open": "npm run cypress:wait -- \"cypress open\" ",
"cypress:run": "npm run cypress:wait -- \"cypress run\" "
}
....
Report following creationg of src/List.js
(without importing it anywhere)
at internal/child_process.js:810:39
at processTicksAndRejections (internal/process/task_queues.js:79:11) {
errno: 'EPIPE',
code: 'EPIPE',
syscall: 'write'
}
npm ERR! code ELIFECYCLE
Thanks for this great package, I'm utilising it to instrument our React app to capture coverage from our frontend app during end-to-end/integration testing, however I have hit a small snag.
Whenever attempting to instrument a Production build (which is only utilised during CI/CD for coverage) the build seems to not honour the %PUBLIC_URL%
environment variable defined in our .env.production
.
It instead defaults to /
and causes issues for our integration tests.
This also in turn means that any of our assets served from the /public
directory aren't templated to replace %PUBLIC_URL% with whatever we have defined.
Here's the command that's being run inside our package.json
:
"coverage": "CYPRESS_INSTRUMENT_PRODUCTION=true react-scripts -r @cypress/instrument-cra build",
With debug logging on it results in the following build:
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.62s.
yarn run v1.22.10
$ CYPRESS_INSTRUMENT_PRODUCTION=true DEBUG=instrument-cra react-scripts -r @cypress/instrument-cra build
instrument-cra finding webpack config { workspaceRoot: '/buildkite/builds/authelia/authelia/web', cypressWebpackConfigPath: undefined } +0ms
instrument-cra path to react-scripts own webpack.config.js: /buildkite/builds/authelia/authelia/web/node_modules/react-scripts/config/webpack.config.js +5ms
instrument-cra checking the environment { envName: 'production', instrumentProduction: 'true', forced: true } +3s
instrument-cra calling real CRA webpack factory with env "production" +0ms
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
2020-11-18T03:35:37.710Z instrument-cra finding webpack config { workspaceRoot: '/buildkite/builds/authelia/authelia/web', cypressWebpackConfigPath: undefined }
2020-11-18T03:35:37.712Z instrument-cra path to react-scripts own webpack.config.js: /buildkite/builds/authelia/authelia/web/node_modules/react-scripts/config/webpack.config.js
2020-11-18T03:35:37.734Z instrument-cra finding webpack config { workspaceRoot: '/buildkite/builds/authelia/authelia/web', cypressWebpackConfigPath: undefined }
2020-11-18T03:35:37.736Z instrument-cra path to react-scripts own webpack.config.js: /buildkite/builds/authelia/authelia/web/node_modules/react-scripts/config/webpack.config.js
2020-11-18T03:35:37.751Z instrument-cra finding webpack config { workspaceRoot: '/buildkite/builds/authelia/authelia/web', cypressWebpackConfigPath: undefined }
2020-11-18T03:35:37.753Z instrument-cra path to react-scripts own webpack.config.js: /buildkite/builds/authelia/authelia/web/node_modules/react-scripts/config/webpack.config.js
Compiled successfully.
File sizes after gzip:
131.88 KB build/static/js/2.d92eb203.chunk.js
41.53 KB (+1 B) build/static/js/main.b48beb66.chunk.js
1.38 KB build/static/css/2.89e66999.chunk.css
768 B (-15 B) build/static/js/runtime-main.aef01254.js
613 B build/static/css/main.7bb9a71f.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
Done in 25.38s.
With the following line being the standout: The project was built assuming it is hosted at /.
yarn install v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "prop-types@^15.6.0".
warning " > [email protected]" has unmet peer dependency "prop-types@^15.6.0".
[4/4] Building fresh packages...
Done in 64.95s.
yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Compiled successfully.
File sizes after gzip:
131.88 KB build/static/js/2.d29e39a8.chunk.js
14.71 KB build/static/js/main.dbe18df5.chunk.js
1.38 KB build/static/css/2.89e66999.chunk.css
775 B build/static/js/runtime-main.cc5273ce.js
613 B build/static/css/main.7bb9a71f.chunk.css
The project was built assuming it is hosted at {{.Base}}/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
https://cra.link/deployment
Done in 57.75s.
This is what I would expect to see, and is what appears if I don't include the instrumentation: The project was built assuming it is hosted at {{.Base}}/.
I have attempted to set the environment variable on the coverage
command like such:
"coverage": "CYPRESS_INSTRUMENT_PRODUCTION=true PUBLIC_URL={{.Base}} react-scripts -r @cypress/instrument-cra build",
Though this also causes an issue because it gets sanitised with URL encoding and results in the following output:
yarn install v1.22.10
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.53s.
yarn run v1.22.10
$ CYPRESS_INSTRUMENT_PRODUCTION=true DEBUG=instrument-cra PUBLIC_URL={{.Base}} react-scripts -r @cypress/instrument-cra build
instrument-cra finding webpack config { workspaceRoot: '/buildkite/builds/authelia/authelia/web', cypressWebpackConfigPath: undefined } +0ms
instrument-cra path to react-scripts own webpack.config.js: /buildkite/builds/authelia/authelia/web/node_modules/react-scripts/config/webpack.config.js +4ms
instrument-cra checking the environment { envName: 'production', instrumentProduction: 'true', forced: true } +3s
instrument-cra calling real CRA webpack factory with env "production" +0ms
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
2020-11-18T03:18:02.725Z instrument-cra finding webpack config { workspaceRoot: '/buildkite/builds/authelia/authelia/web', cypressWebpackConfigPath: undefined }
2020-11-18T03:18:02.727Z instrument-cra path to react-scripts own webpack.config.js: /buildkite/builds/authelia/authelia/web/node_modules/react-scripts/config/webpack.config.js
2020-11-18T03:18:02.760Z instrument-cra finding webpack config { workspaceRoot: '/buildkite/builds/authelia/authelia/web', cypressWebpackConfigPath: undefined }
2020-11-18T03:18:02.762Z instrument-cra path to react-scripts own webpack.config.js: /buildkite/builds/authelia/authelia/web/node_modules/react-scripts/config/webpack.config.js
2020-11-18T03:18:02.798Z instrument-cra finding webpack config { workspaceRoot: '/buildkite/builds/authelia/authelia/web', cypressWebpackConfigPath: undefined }
2020-11-18T03:18:02.800Z instrument-cra path to react-scripts own webpack.config.js: /buildkite/builds/authelia/authelia/web/node_modules/react-scripts/config/webpack.config.js
Compiled successfully.
File sizes after gzip:
131.88 KB build/static/js/2.d92eb203.chunk.js
41.53 KB build/static/js/main.9f798171.chunk.js
1.38 KB build/static/css/2.89e66999.chunk.css
783 B build/static/js/runtime-main.0b76720a.js
613 B build/static/css/main.7bb9a71f.chunk.css
The project was built assuming it is hosted at /%7B%7B.Base%7D%7D/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
https://cra.link/deployment
Done in 28.64s.
The project was built assuming it is hosted at /%7B%7B.Base%7D%7D/.
I'm not sure if this is a bug in this package or otherwise, so I'm hoping you might have some pointers as to how this might be addressed/fixed?
If you need any other information please let me know.
Hello, I have a react app that works great with "start": "PORT=3001 BROWSER=none react-scripts start"
. The problem comes when I try to instrument for use on cypress code coverage. I modified the line this way:
"PORT=3001 BROWSER=none react-scripts -r @cypress/instrument-cra start",
After Npm start when I open the browser it shows this error. The code coverage report works but not the web page:
Hey! Really awesome project you've got here.
I have one question though: why is this only supported for a development build and not prod?
I'd like to run this with react-scripts build: react-scripts -r @cypress/instrument-cra build
but it currently fails because of these lines:
if (envName !== 'development') {
throw new Error(
'Can overwrite cra webpack config only for development environment'
)
}
Do you think running this in production might be supported?
to test react-scripts v3 and v4 separately
Following https://glebbahmutov.com/blog/testing-pyramids/ approach
I have a create-react-app version 3.4.1 which uses typescript, it has a tsconfig file with alias paths, when I use react-scripts -r @cypress/instrument-cra start
it is unable to find those alias paths.
With the release of CRA v4, this does not work anymore.
at internal/child_process.js:810:39
at processTicksAndRejections (internal/process/task_queues.js:79:11) {
errno: 'EPIPE',
code: 'EPIPE',
syscall: 'write'
}
npm ERR! code ELIFECYCLE
Greetings!
I've encountered a problem with collected coverage with paths in .out.json
All of them starts with /app/src/...
And coverage could not be collected properly as nyc produces an error:
Unable to lookup source: /app/src/Components/App/index.jsx(ENOENT: no such file or directory, open '/app/src/Components/App/index.jsx')
If I change the paths to ./src and create the report manually with nyc v13
everything seems to be working properly.
My app has a standard layout, created by RCA and all my source code is located in the src directory.
Might it be related to issue with nyc 14.1.1 bug?
cypress-io/code-coverage#65
Any feeedback from the cypress team? Multiple open issues and PRs, no feedback on any of those, stagnant updates
In a Gitlab build deployment, it gives error webpack is configured only for development env during build phase. I set CYPRESS_INSTRUMENT_PRODUCTION=true in .env file.
react-scripts
and in ejected app use https://github.com/bahmutov/find-webpackIn #63 there was support added for yarn workspaces.
Unfortunately this requires react-scripts
to be be hoisted to the workspace root to work.
In our case, we explicitly opted out of hoisting (no-hoisted) react-scripts
, because we have multiple versions of react-scripts
in our repo. instrument-cra
worked flawlessly, up until we remove the hoisted version (which mismatched in some projects). So instrument-cra
might also currently instrument a different webpack.config.js
than CRA actually uses.
IMHO the code should be adopted to the following:
cypressWebpackConfigPath
at the following locations in this order:
cypressWebpackConfigPath
is not defined, look for webpack.config.js
at the following locations:
<current package>/node_modules/react-scripts/config/webpack.config.js
<workspace root>/node_modules/react-scripts/config/webpack.config.js
In a Gitlab build deployment, it gives error webpack is configured only for development env during build phase. I set CYPRESS_INSTRUMENT_PRODUCTION=true in .env file.
yarn run v1.15.2
$ react-scripts -r @cypress/instrument-cra start
internal/modules/cjs/loader.js:651
throw err;
^
Error: Cannot find module '/monorepo/packages/my-react-app/node_modules/react-scripts/config/webpack.config.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:649:15)
at Function.Module._load (internal/modules/cjs/loader.js:575:25)
at Module.require (internal/modules/cjs/loader.js:705:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object.<anonymous> (monorepo/node_modules/@cypress/instrument-cra/index.js:17:24)
at Module._compile (internal/modules/cjs/loader.js:799:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
at Module.load (internal/modules/cjs/loader.js:666:32)
at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
at Function.Module._load (internal/modules/cjs/loader.js:598:3)
error Command failed with exit code 1.
This is looking for node_modules/react-scripts/config/webpack.config.js
, but this file would actually exist higher up where yarn workspaces
uses a single node_modules
for all workspaces that use the same version of react-scripts
as a dependency.
When using this package with CRA build command: react-scripts -r @cypress/instrument-cra build"
, the result build files are not correctly generated with relative file paths
On the left is the instrumented build of asset-manifest.json
with this package, and on the right is the vanilla CRA build. You can see that static files generated with this package does NOT include the ./
relative path to the static files.
As such, on page load of the index.html
, static files are never found:
As such, it should be noted that this package should NOT be used with CRA build
command (in its current state), but only for CRA start
command.
Our devops is implementing it inside a docker container and we had to start the application directly from react scripts using forever, like:
forever start node_modules\react-scripts\scripts\start.js
and then run cypress tests, but we couldn't instrument using like if we were using yarn start (react-scripts -r @cypress/instrument-cra start)
so, by the way we are running our tests, is it possible to instrumento using another approach? If we run locally with react-scripts -r @cypress/instrument-cra start it works perfectly.
I have an app that was using this with npm. I switched to pnpm to install packages and now get this error for the same script.
> [email protected] start E:\app
> react-scripts -r @cypress/instrument-cra start
E:\app\node_modules\.pnpm\@[email protected]\node_modules\@cypress\instrument-cra\index.js:72
require.cache[webpackConfigPath].exports = fakeConfig
^
TypeError: Cannot set property 'exports' of undefined
at Object.<anonymous> (E:\app\node_modules\.pnpm\@[email protected]\node_modules\@cypress\instrument-cra\index.js:72:42)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at Module._preloadModules (internal/modules/cjs/loader.js:1244:12)
at loadPreloadModules (internal/bootstrap/pre_execution.js:475:5)
at prepareMainThreadExecution (internal/bootstrap/pre_execution.js:72:3)
at internal/main/run_main_module.js:7:1
ELIFECYCLE Command failed with exit code 1.
i have installed instrument-cra in my project
also i have set in my .env file CYPRESS_INSTRUMENT_PRODUCTION=true
i want to instrument on my SIT server.
on react-script-3
what are the correct steps for it.
Repro steps:
1.
npx create-react-app my-app
cd my-app
npm i -D @cypress/instrument-cra
package.json
:"build:coverage": "CYPRESS_INSTRUMENT_PRODUCTION=true react-scripts --require @cypress/instrument-cra build"
PUBLIC_URL=test npm run build
PUBLIC_URL=test npm run build:coverage
Current result:
Command without instrument-cra builds app hosted at test/
:
The project was built assuming it is hosted at test/.
Command with instrument-cra builds app hosted at /test/
The project was built assuming it is hosted at /test/.
Expected result:
Leading slash to PUBLIC_URL shouldn't be added when building with instrument-cra.
I cloned the example from here: https://github.com/bahmutov/testing-react
I added nyc
to the package.json
:
{
...
"scripts": {
...
"start-dev": "react-scripts -r @cypress/instrument-cra start"
...
},
...
"nyc": {
"exclude": "src/constants/actionTypes.js"
}
}
However I'm still seeing this file in window.__coverage__
:
/.../testing-react/src/constants/actionTypes.js: {path: "/.../testing-react/src/constants/actionTypes.js", statementMap: {…}, fnMap: {…}, branchMap: {…}, s: {…}, …}
Am I missing something?
I have created a new react-app using react-scripts and my folder structure will be like this:
/online-shopping
/online-shopping/kick-start
package.json (start: start-react-scripts -r @cypress/instrument-cra start)
/online-shopping/features
the kick-start folder contains the basic structure of the app but all the mega menu items and sub-features reside inside /features which is parallel to the kick-start folder.
Now when I try to instrument the code it's covering only files that are residing inside /kick-start but it's not instrumenting the files which are inside /features.
I have tried to add them using "nyc" : {include : ["../online-shopping/features"]}
but it didn't work
Thanks for this awesome project!
I'd like to instrument a project which uses a fork of create-react-app
with only the slightest change: it adds 2 lines in webpack.config.js
, and is otherwise unmodified. (See Alternatives to Ejecting
in the Create React App docs.)
Here's what our package.json
looks like – we've followed the advice from the Create React App documentation: instead of ejecting, we've replaced "react-scripts": "3.4.1"
with "@bitauth/react-scripts-bitauth-ide": "^3.4.1"
.
Could @cypress/instrument-cra
somehow support instrumenting react-scripts
with a different webpackConfigPath
?
Currently, when I set the start
script to react-scripts -r @cypress/instrument-cra start
, the start
task returns:
Error: Cannot find module '[...]/node_modules/react-scripts/config/webpack.config.js'
But when I modify node_modules/@cypress/instrument-cra/index.js
from:
const webpackConfigPath = path.resolve(
findYarnWorkspaceRoot() || process.cwd(),
'node_modules',
'react-scripts',
'config',
'webpack.config.js'
)
to:
const webpackConfigPath = path.resolve(
findYarnWorkspaceRoot() || process.cwd(),
'node_modules',
'@bitauth',
'react-scripts-bitauth-ide',
'config',
'webpack.config.js'
)
Instrumentation is successful, and everything works perfectly.
Would you consider accepting this path as a configuration parameter somewhere?
Maybe webpackConfigPath
in cypress.json
or cypressWebpackConfigPath
in package.json
?
I'm using @cypress/instrument-cra": "^1.3.2" and I have noticed that even setting
nyc": { "exclude": [ "src/serviceWorker.js" ] }
on my package.json, the "src/serviceWorker.js" file still appearing on nyc's coverage page report.
When running directly with "nyc report --reporter=lcov", it works like a charm.
I am using @cypress/instrument-cra
in monorepo, with yarn workspace
to symlink packages.
/pkg1
/pkg2
/pkg3
- react-app
- cypress
- src
- package.json
code coverage works fine, but i need to collect coverage for packages used in react-app
. Inside react components i am importing src packages as following:
import pkg1 from @myProject/pkg1
The problem is pkg1
is not included in the coverage report. I tried to include node_modules
in nyc
but it didn't work.
"nyc": {
"all": true,
"include": [
"node_modules"
],
"excludeNodeModules": false
}
Is there an example to work with monorepo? In Jest
i can use collectCoverageFrom
but how i can do it here.
CRA release v5: https://github.com/facebook/create-react-app/releases/tag/v5.0.0
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.