Add support for component tests

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

cypress-component.json

@@ -0,0 +1,10 @@
+{
+  "testFiles": "*.{md,js}",
+  "experimentalComponentTesting": true,
+  "integrationFolder": "cypress/empty",
+  "supportFile": "cypress/support/components.js",
+  "$schema": "https://on.cypress.io/cypress.schema.json",
+  "env": {
+    "coverage": false
+  }
+}

cypress-markdown.json

@@ -1,3 +1,4 @@
 {
-  "testFiles": "*.md"
+  "testFiles": "*.md",
+  "$schema": "https://on.cypress.io/cypress.schema.json"
 }

cypress/component/hello.js

@@ -0,0 +1,17 @@
+import { testExamples } from '../..'
+import { source } from 'common-tags'
+const tests = [
+  {
+    name: 'mount Hello component',
+    description: 'Without passing any props',
+    // maybe we could move the common code here
+    // into the support file?
+    // for now, no JSX
+    test: source`
+      const hello = React.createElement('div', null, 'Hello')
+      mount(hello)
+      cy.contains('Hello').should('be.visible')
+    `,
+  },
+]
+testExamples(tests)

cypress/component/hello.md

@@ -0,0 +1,10 @@
+# Hello component
+
+<!-- fiddle Hello -->
+```js
+const {mount} = require('cypress-react-unit-test')
+const Hello = () => <div>Hello</div>
+mount(<Hello />)
+cy.contains('Hello')
+```
+<!-- fiddle-end -->

cypress/component/simple.js

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+
+// note: React and mount where set as globals in the support file
+describe('simple', () => {
+  it('has the right spec type', () => {
+    expect(Cypress.spec).to.have.property('specType', 'component')
+  })
+
+  it('mounts the component', () => {
+    const hello = React.createElement('div', null, 'Hello')
+    mount(hello)
+    cy.contains('Hello').should('be.visible')
+  })
+
+  it('mounts the component using JSX', () => {
+    const Hello = () => <div>Hello</div>
+    mount(<Hello />)
+    cy.contains('Hello').should('be.visible')
+  })
+})

cypress/empty/README.txt

@@ -0,0 +1 @@
+Empty on purpose

cypress/plugins/index.js

@@ -1,4 +1,4 @@
-const mdPreprocessor = require('../../src/markdown-preprocessor')
+const { mdPreprocessor } = require('../../src/markdown-preprocessor')
 
 module.exports = (on, config) => {
   // find and run tests in JS or Markdown files

cypress/support/components.js

@@ -0,0 +1,7 @@
+const React = require('react')
+const { mount } = require('cypress-react-unit-test')
+
+globalThis.React = React
+globalThis.mount = mount
+
+require('cypress-react-unit-test/support')