Update for use with cypress 7

Author: arschmitz

README.md

@@ -28,28 +28,17 @@ npm install --save-dev cypress-svelte-unit-test
 npx install --save-dev cypress
 ```
 
-1. Tell Cypress to use your `rollup.config.js` to bundle specs using [cypress/plugins/index.js](cypress/plugins/index.js):
+1. Tell Cypress to use your webpack.config.js` to bundle specs using [cypress/plugins/index.js](cypress/plugins/index.js):
 
 ```js
-module.exports = (on) => {
-  // @bahmutov/cy-rollup is already a dependency of cypress-svelte-unit-test
-  const filePreprocessor = require('@bahmutov/cy-rollup')
-  on('file:preprocessor', filePreprocessor())
-}
-```
-
-2. ⚠️ Turn the experimental component support on in your `cypress.json`. You can also specify where component spec files are located. For example, to have them located in `src` folder use:
+const { startDevServer } = require('@cypress/webpack-dev-server')
+const webpackConfig = require('../../webpack.config.js')
 
-```json
-{
-  "experimentalComponentTesting": true,
-  "componentFolder": "src",
-  "testFiles": "**/*spec.js"
+module.exports = (on, config) => {
+  on('dev-server:start', (options) => startDevServer({ options, webpackConfig }))
 }
 ```
 
-See [cypress.json](cypress.json) in this project.
-
 3. Write a test!
 
 ```js
@@ -109,10 +98,13 @@ import '@cypress/code-coverage/support'
 Add the plugin to your [cypress/plugins/index.js](cypress/plugins/index.js) file
 
 ```js
+const { startDevServer } = require('@cypress/webpack-dev-server')
+const webpackConfig = require('../../webpack.config.js')
+
 module.exports = (on, config) => {
-  const filePreprocessor = require('@bahmutov/cy-rollup')
-  on('file:preprocessor', filePreprocessor())
+  on('dev-server:start', (options) => startDevServer({ options, webpackConfig }))
 
+  // https://github.com/cypress-io/code-coverage
   require('@cypress/code-coverage/task')(on, config)
   // IMPORTANT to return the config object
   // with the any changed environment variables

cypress.json

@@ -3,7 +3,6 @@
   "viewportHeight": 300,
   "viewportWidth": 300,
   "testFiles": "**/*spec.js",
-  "experimentalComponentTesting": true,
   "experimentalFetchPolyfill": true,
   "componentFolder": "cypress/components",
   "nodeVersion": "system"

cypress/components/styles/styles-spec.js

@@ -24,11 +24,11 @@ describe('Styles', () => {
 
   it('adds stylesheet', () => {
     mount(Component, null, {
-      stylesheet: '/__root/cypress/components/styles/app.css',
+      stylesheet: '/cypress/components/styles/app.css',
     })
     cy.get('body').should('have.css', 'background-color', 'rgb(0, 255, 255)')
   })
-  
+
   it('adds CSS file and resolves a svelte component', () => {
     // Regression test for https://github.com/bahmutov/cypress-svelte-unit-test/issues/250.
     // Basically, `mount` was not returning the promise that returns the svelte component instance if using `cssFile` option.

cypress/plugins/index.js

@@ -1,11 +1,9 @@
-module.exports = (on, config) => {
-  // https://github.com/bahmutov/cy-rollup
-  const filePreprocessor = require('@bahmutov/cy-rollup')
-  on('file:preprocessor', filePreprocessor())
+const { startDevServer } = require('@cypress/webpack-dev-server')
+const webpackConfig = require('../../webpack.config.js')
 
-  // https://github.com/cypress-io/code-coverage
-  require('@cypress/code-coverage/task')(on, config)
-  // IMPORTANT to return the config object
-  // with the any changed environment variables
+module.exports = (on, config) => {
+  on('dev-server:start', async (options) => {
+    return startDevServer({ options, webpackConfig })
+  })
   return config
 }

cypress/plugins/using-webpack.js

@@ -1,5 +1,4 @@
 import {
-  checkMountModeEnabled,
   cleanupStyles,
   injectStylesBeforeElement,
   polyfillFetchIfNeeded,
@@ -96,7 +95,6 @@ export function mount(
   styleOptions: Partial<StyleOptions> = {},
 ) {
   options = options || {}
-  checkMountModeEnabled()
 
   return cy.then(() => {
     // @ts-ignore

lib/index.ts

@@ -1,15 +1,6 @@
 import { StyleOptions } from '.'
 import unfetch from 'unfetch'
 
-export function checkMountModeEnabled() {
-  // @ts-ignore
-  if (Cypress.spec.specType !== 'component') {
-    throw new Error(
-      `In order to use mount or unmount functions please place the spec in component folder`,
-    )
-  }
-}
-
 /**
  * Remove any style or extra link elements from the iframe placeholder
  * left from any previous test