fix: collect code coverage for Next.js components (#440)

Author: bahmutov

examples/nextjs/README.md

@@ -55,6 +55,6 @@ cy.contains(
 
 Find more examples in [Page.spec.jsx](./cypress/components/Page.spec.jsx).
 
-## Coverage
+## Mocking imports
 
-Code coverage is not working yet, see issue [431](https://github.com/bahmutov/cypress-react-unit-test/issues/431). It was disabled in [cypress.json](cypress.json)
+Mocking imports is not working yet, seems the plugin we are inserting for loose mode causes problems, see issue [439](https://github.com/bahmutov/cypress-react-unit-test/issues/439).

examples/nextjs/cypress.json

@@ -6,6 +6,6 @@
   "experimentalFetchPolyfill": true,
   "componentFolder": "cypress/components",
   "env": {
-    "coverage": false
+    "coverage": true
   }
 }

examples/nextjs/cypress/components/HelloWorld.spec.jsx

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress-react-unit-test'
+import HelloWorld from '../../components/HelloWorld.mdx'
+
+describe('MDX component', () => {
+  it('Renders using  custom next.config.js', () => {
+    mount(<HelloWorld />)
+
+    cy.contains('Hello').should('have.css', 'fontWeight', '700')
+    cy.contains('This is JSX')
+      .parent()
+      .should('have.css', 'background-color', 'rgb(255, 99, 71)')
+  })
+})

examples/nextjs/cypress/components/Search.spec.jsx

@@ -1,8 +1,7 @@
 /// <reference types="cypress" />
-import * as React from 'react'
+// import * as React from 'react'
 import { mount } from 'cypress-react-unit-test'
 import { Search } from '../../components/Search'
-import HelloWorld from '../../components/HelloWorld.mdx'
 
 describe('<Search /> NextJS component', () => {
   it('Renders component', () => {
@@ -11,13 +10,4 @@ describe('<Search /> NextJS component', () => {
     cy.get('input').type('124152')
     cy.contains('.search-text', '124152').should('be.visible')
   })
-
-  it('Renders mdx component using  custom next.config.js', () => {
-    mount(<HelloWorld />)
-
-    cy.contains('Hello').should('have.css', 'fontWeight', '700')
-    cy.contains('This is JSX')
-      .parent()
-      .should('have.css', 'background-color', 'rgb(255, 99, 71)')
-  })
 })

examples/nextjs/package.json

@@ -10,8 +10,8 @@
     "test": "node ../../scripts/cypress-expect run --passing 7",
     "cy:open": "../../node_modules/.bin/cypress open",
     "build:static": "next build && next out",
-    "check-coverage": "echo no code coverage yet",
-    "only-covered": "echo no code coverage yet"
+    "check-coverage": "../../node_modules/.bin/check-coverage components/Search.jsx && ../../node_modules/.bin/check-coverage pages/index.js",
+    "only-covered": "../../node_modules/.bin/only-covered components/Search.jsx pages/index.js"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."

package-lock.json

@@ -136,7 +136,7 @@
     "@zeit/next-sass": "^1.0.1",
     "babel-plugin-istanbul": "6.0.0",
     "debug": "4.1.1",
-    "find-webpack": "2.0.0",
+    "find-webpack": "2.1.0",
     "framer-motion": "2.6.13",
     "i18next": "19.7.0",
     "mime-types": "2.1.26",

package.json

@@ -35,7 +35,9 @@ async function getNextWebpackConfig(config) {
     {
       coverage: !coverageIsDisabled,
       // insert Babel plugin to mock named imports
-      looseModules: true,
+      // disable because causes an error with double definitions
+      // https://github.com/bahmutov/cypress-react-unit-test/issues/439
+      looseModules: false,
     },
     nextWebpackConfig,
   )