The latest articles on DEV Community by LamNVQ (@dawngate). https://dev.to/dawngate https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1019002%2Fcef23778-57bf-42d1-bac8-1143af6dcaee.png https://dev.to/dawngate en LamNVQ Tue, 27 Aug 2024 15:29:00 +0000 https://dev.to/dawngate/nextjs-cypress-code-coverage-setup-36p https://dev.to/dawngate/nextjs-cypress-code-coverage-setup-36p <p>For quickly understand,</p> <p>Give a look in my current project:</p> <p><a href="https://github.com/DawnGate/nextjs-cypress-code-coverage" rel="noopener noreferrer">https://github.com/DawnGate/nextjs-cypress-code-coverage</a></p> <p>I struggle with config nextjs + cypress + babel + istanbul for Code coverage in 2 days.</p> <p>And after research, try and test. I created a public repo for quickly setup a new project, and I want to other can easy to setup.</p> <p>For quick summary:</p> <ul> <li>Create new project with "npm i create-next-app@latest"</li> <li>Install cypress, @cypress/code-coverage, babel-plugin-istanbul</li> <li>Using babel to override the swc compiler (remember remove next/font -&gt; you will find some documents talk about it)</li> <li>Config cypress, babelrc.json, add api/coverage for get <strong>coverage</strong> data from server-side component of Nextjs (Please read the source code for more information)</li> <li>npx cypress open or npx cypress run =&gt; check your coverage report and Done!</li> </ul> cypress nextjs