Add an example illustrating ct with react + webpack

badeball · badeball · commit 98f9570502d8 · 2022-07-03T12:05:16.000+02:00
diff --git a/examples/ct-react-ts/.npmrc b/examples/ct-react-ts/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/examples/ct-react-ts/cypress.config.ts b/examples/ct-react-ts/cypress.config.ts
@@ -0,0 +1,52 @@
+import { defineConfig } from "cypress";
+
+import * as Webpack from "webpack";
+
+import { devServer } from "@cypress/webpack-dev-server";
+
+const webpackConfig = (
+  cypressConfig: Cypress.PluginConfigOptions
+): Webpack.Configuration => {
+  return {
+    resolve: {
+      extensions: [".js", ".ts", ".tsx"],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          exclude: [/node_modules/],
+          use: [
+            {
+              loader: "ts-loader",
+              options: { transpileOnly: true },
+            },
+          ],
+        },
+        {
+          test: /\.feature$/,
+          use: [
+            {
+              loader: "@badeball/cypress-cucumber-preprocessor/webpack",
+              options: cypressConfig,
+            },
+          ],
+        },
+      ],
+    },
+  };
+};
+
+export default defineConfig({
+  component: {
+    specPattern: "**/*.feature",
+    supportFile: false,
+    devServer(devServerConfig) {
+      return devServer({
+        ...devServerConfig,
+        framework: "react",
+        webpackConfig: webpackConfig(devServerConfig.cypressConfig),
+      });
+    },
+  },
+});
diff --git a/examples/ct-react-ts/cypress/component/App.feature b/examples/ct-react-ts/cypress/component/App.feature
@@ -0,0 +1,4 @@
+Feature: App
+  Scenario: render
+    Given I render the component
+    Then I should see the text "Hello world!"
diff --git a/examples/ct-react-ts/cypress/component/App.tsx b/examples/ct-react-ts/cypress/component/App.tsx
@@ -0,0 +1,13 @@
+import { Given, Then } from "@badeball/cypress-cucumber-preprocessor";
+
+import { mount } from 'cypress/react'
+
+import App from "../../src/App";
+
+Given("I render the component", () => {
+  mount(<App />);
+});
+
+Then("I should see the text {string}", (text: string) => {
+  cy.contains(text).should("exist");
+});
diff --git a/examples/ct-react-ts/cypress/support/component-index.html b/examples/ct-react-ts/cypress/support/component-index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+    
+  </head>
+  <body>
+    
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/examples/ct-react-ts/package.json b/examples/ct-react-ts/package.json
@@ -0,0 +1,23 @@
+{
+  "dependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "latest",
+    "@cypress/webpack-dev-server": "latest",
+    "cypress": "latest",
+    "react": "17",
+    "react-dom": "17",
+    "react-scripts": "latest",
+    "ts-loader": "latest"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/ct-react-ts/src/App.cy.tsx b/examples/ct-react-ts/src/App.cy.tsx
@@ -0,0 +1,10 @@
+import { mount } from 'cypress/react'
+
+import App from './App';
+
+describe('App', () => {
+  it('should render «Hello world!»', () => {
+    mount(<App />);
+    cy.contains("Hello world!").should("exist");
+  });
+});
diff --git a/examples/ct-react-ts/src/App.tsx b/examples/ct-react-ts/src/App.tsx
@@ -0,0 +1,3 @@
+export default function App () {
+  return <p>Hello world!</p>
+}
diff --git a/examples/ct-react-ts/tsconfig.json b/examples/ct-react-ts/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "types": ["cypress"]
+  }
+}
diff --git a/examples/readme.md b/examples/readme.md
@@ -1,9 +1,19 @@
 # Examples
 
+## E2E testing
+
 The examples illustrates using each bundler in each language flavor.
 
 |            | CJS                    | ESM                    | TS                    |
 |------------|------------------------|------------------------|-----------------------|
 | Browserify | [Link](browserify-cjs) | [Link](browserify-esm) | [Link](browserify-ts) |
 | Esbuild    | [Link](esbuild-cjs)    | [Link](esbuild-esm)    | [Link](esbuild-ts)    |
 | Webpack    | [Link](webpack-cjs)    | [Link](webpack-esm)    | [Link](webpack-ts)    |
+
+## Component testing
+
+Only a single example illustrating component testing exist so far.
+
+|                 | CJS                    | ESM                    | TS                    |
+|-----------------|------------------------|------------------------|-----------------------|
+| React + Webpack |                        |                        | [Link](ct-react-ts)   |

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function App () {`
	`2`	`+ return <p>Hello world!</p>`
	`3`	`+}`