fix: cypress not working with config in ts (#5013)

Talend · Nov 27, 2023 · 61603e6 · 61603e6
1 parent e143571
commit 61603e6
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "prepare": "husky install"
   },
   "resolutions": {
-    "**/cypress": "^12.17.4",
+    "**/cypress": "^13.6.0",
     "**/@types/react": "^18.2.7",
     "**/@types/react-dom": "^18.2.7",
     "**/i18next-scanner-typescript/typescript": "^5.0.4",

diff --git a/packages/dataviz/cypress.config.ts → packages/dataviz/cypress.config.js b/packages/dataviz/cypress.config.ts → packages/dataviz/cypress.config.js
@@ -1,11 +1,11 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { defineConfig } from 'cypress';
-import path from 'path';
+const { defineConfig } = require('cypress');
+const path = require('path');
 
-import {
+const {
 	getWebpackRules,
 	getWebpackPlugins,
-} from '@talend/scripts-config-react-webpack/config/webpack.config.common';
+} = require('@talend/scripts-config-react-webpack/config/webpack.config.common');
 
 const webpack = require('webpack');
 const srcDirectories = [
@@ -34,7 +34,7 @@ const webpackConfig = {
 		},
 	},
 	module: {
-		rules: getWebpackRules(srcDirectories, true, true),
+		rules: getWebpackRules([path.resolve(process.cwd(), './src/')], true, true),
 	},
 	plugins: getWebpackPlugins().concat([
 		new webpack.ProvidePlugin({
@@ -43,7 +43,7 @@ const webpackConfig = {
 	]),
 };
 
-export default defineConfig({
+module.exports = defineConfig({
 	viewportWidth: 400,
 	viewportHeight: 400,
 	video: false,

diff --git a/packages/dataviz/cypress.d.ts b/packages/dataviz/cypress.d.ts
diff --git a/packages/dataviz/cypress/support/commands.ts b/packages/dataviz/cypress/support/commands.ts
@@ -1,19 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /// <reference types="cypress" />
-
+import '@testing-library/cypress/add-commands';
 import { mount } from 'cypress/react';
-declare global {
-	// eslint-disable-next-line @typescript-eslint/no-namespace
-	namespace Cypress {
-		interface Chainable {
-			mount: typeof mount;
-		}
-	}
-}
+
 
 Cypress.Commands.add('mount', (component, options) => {
 	const wrapper = component;
 	return mount(wrapper, options);
 });
-
-import '@testing-library/cypress/add-commands';
diff --git a/packages/dataviz/package.json b/packages/dataviz/package.json
@@ -74,7 +74,7 @@
     "@types/react": "^18.2.38",
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-specification": "^1.0.5",
-    "cypress": "^12.17.4",
+    "cypress": "^13.6.0",
     "cross-env": "^7.0.3",
     "i18next": "^23.7.6",
     "react": "^18.2.0",

diff --git a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable testing-library/await-async-queries */
-/* eslint-disable testing-library/prefer-screen-queries */
 
-import HorizontalBarChart from './HorizontalBarChart.component';
+/* eslint-disable testing-library/prefer-screen-queries */
 import { ChartStyle } from '../../../types';
+import HorizontalBarChart from './HorizontalBarChart.component';
 
 context('<HorizontalBarChart />', () => {
 	it('Should trigger onBarClick', () => {
@@ -51,7 +51,7 @@ context('<HorizontalBarChart />', () => {
 				height={300}
 				width={400}
 				onBarClick={onBarClick}
-				getTooltipContent={() => <div data-testid="tooltip">tooltip</div>}
+				getTooltipContent={() => <div data-test="tooltip">tooltip</div>}
 			/>,
 		);
 
@@ -60,7 +60,7 @@ context('<HorizontalBarChart />', () => {
 			.first()
 			.trigger('mousemove')
 			.trigger('click', { force: true });
-		cy.get('[data-test="myTooltipContent"]').should('be.visible');
+		cy.get('[data-test="tooltip"]').should('be.visible');
 	});
 	it('Should not grow to available size if not enough data provided', () => {
 		const onBarClick = cy.stub().as('onBarClick');

diff --git a/packages/design-system/cypress.config.ts → packages/design-system/cypress.config.js b/packages/design-system/cypress.config.ts → packages/design-system/cypress.config.js
@@ -1,11 +1,11 @@
-import { defineConfig } from 'cypress';
+const { defineConfig } = require('cypress');
 
-import path from 'path';
+const path = require('path');
 
-import {
+const {
 	getWebpackRules,
 	getWebpackPlugins,
-} from '@talend/scripts-config-react-webpack/config/webpack.config.common';
+} = require('@talend/scripts-config-react-webpack/config/webpack.config.common');
 
 const webpackConfig = {
 	mode: 'development',
@@ -26,7 +26,7 @@ const webpackConfig = {
 	plugins: getWebpackPlugins(),
 };
 
-export default defineConfig({
+module.exports = defineConfig({
 	component: {
 		devServer: {
 			framework: 'react',

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -83,7 +83,7 @@
     "browser-sync-webpack-plugin": "^2.3.0",
     "concurrently": "^7.6.0",
     "core-js": "^3.33.3",
-    "cypress": "^12.17.4",
+    "cypress": "^13.6.0",
     "focus-outline-manager": "^1.0.2",
     "i18next": "^23.7.6",
     "i18next-scanner": "^4.4.0",