#220: Fix console logs not working in component testing.

archfz · Oct 29, 2023 · b5b44e1 · b5b44e1
1 parent de0bba0
commit b5b44e1
Show file tree

Hide file tree

Showing 8 changed files with 5,917 additions and 2,471 deletions.
diff --git a/src/collector/LogCollectBrowserConsole.js b/src/collector/LogCollectBrowserConsole.js
@@ -11,8 +11,11 @@ module.exports = class LogCollectBrowserConsole {
 
   register() {
     const oldConsoleMethods = {};
+    const event = Cypress.testingType === 'component'
+      ? 'test:before:run'
+      : 'window:before:load';
 
-    Cypress.on('window:before:load', () => {
+    Cypress.on(event, () => {
       const docIframe = window.parent.document.querySelector("[id*='Your project: ']") ||
         window.parent.document.querySelector("[id*='Your App']");
       const appWindow = docIframe.contentWindow;

diff --git a/test/cypress.config.js b/test/cypress.config.js
@@ -2,6 +2,7 @@ const { defineConfig } = require('cypress')
 const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
 const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild.js");
 const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
+const Promise = require("@babel/core/lib/vendor/import-meta-resolve");
 
 module.exports = defineConfig({
   e2e: {
@@ -143,5 +144,14 @@ module.exports = defineConfig({
 
       return config;
     }
-  }
+  },
+  component: {
+    devServer: {
+      bundler: 'webpack',
+    },
+    setupNodeEvents(on, config) {
+      require('../src/installLogsPrinter')(on, {});
+      return config;
+    }
+  },
 })
diff --git a/test/cypress/component/sample.cy.jsx b/test/cypress/component/sample.cy.jsx
@@ -0,0 +1,5 @@
+it('uses custom text for the button label', () => {
+  cy.mount(<div>Click me!</div>)
+  cy.wait(1000);
+  cy.get('nope', {timeout: 1});
+})
diff --git a/test/cypress/support/component-index.html b/test/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/test/cypress/support/component.js b/test/cypress/support/component.js
@@ -0,0 +1,5 @@
+import './commands';
+import { mount } from 'cypress/react';
+
+Cypress.Commands.add('mount', mount)
+require('../../../src/installLogsCollector')({});