diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 22d791c..87171c4 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -32,3 +32,6 @@ jobs: - name: Test run: pnpm run test + + - name: Cypress Test + run: pnpm run cypress:run diff --git a/cypress/component/Test.cy.tsx b/cypress/component/Test.cy.tsx new file mode 100644 index 0000000..9fae68b --- /dev/null +++ b/cypress/component/Test.cy.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import { TestComponent } from './TestComponent' + +describe('Test.cy.tsx', () => { + it('playground', () => { + cy.mount() + cy.contains('h1', 'TitleText').should('be.visible') + cy.contains('p', 'BodyText').should('be.visible') + }) +}) diff --git a/cypress/component/TestComponent.tsx b/cypress/component/TestComponent.tsx new file mode 100644 index 0000000..5b68008 --- /dev/null +++ b/cypress/component/TestComponent.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +export const TestComponent = ({ title, text }) => { + return ( +
+

{title}

+ +

{text}

+
+ ) +} diff --git a/cypress/config/cypress.config.ts b/cypress/config/cypress.config.ts new file mode 100644 index 0000000..79ed979 --- /dev/null +++ b/cypress/config/cypress.config.ts @@ -0,0 +1,18 @@ +import { defineConfig } from 'cypress' +import { devServer } from '../../dist/devServer' + +export default defineConfig({ + component: { + video: false, + supportFile: './support/component.ts', + specPattern: './component/*.cy.{tsx,jsx,js,ts}', + indexHtmlFile: '../support/component-index.html', + devServer(devServerConfig) { + return devServer({ + ...devServerConfig, + framework: 'react', + rspackConfig: require('./rspack.config.js'), + }) + }, + }, +}) diff --git a/cypress/config/rspack.config.js b/cypress/config/rspack.config.js new file mode 100644 index 0000000..0b56ea8 --- /dev/null +++ b/cypress/config/rspack.config.js @@ -0,0 +1,5 @@ +const rspack = require('@rspack/core') + +module.exports = { + plugins: [new rspack.ProvidePlugin({ process: 'process' })], +} diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html new file mode 100644 index 0000000..95b497b --- /dev/null +++ b/cypress/support/component-index.html @@ -0,0 +1,15 @@ + + + + + + + + Components App + + + +
+ + + \ No newline at end of file diff --git a/cypress/support/component.ts b/cypress/support/component.ts new file mode 100644 index 0000000..ca8ea4a --- /dev/null +++ b/cypress/support/component.ts @@ -0,0 +1,36 @@ +// *********************************************************** +// This example support/component.ts is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +// import './commands' + +// Alternatively you can use CommonJS syntax: +// require('./commands') + +import { mount } from 'cypress/react18' + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a at the top of your spec. +declare global { + namespace Cypress { + interface Chainable { + mount: typeof mount + } + } +} + +Cypress.Commands.add('mount', mount) diff --git a/dist/helpers/sourceRelativeRspackModules.js b/dist/helpers/sourceRelativeRspackModules.js index 99dc18e..332b6e1 100644 --- a/dist/helpers/sourceRelativeRspackModules.js +++ b/dist/helpers/sourceRelativeRspackModules.js @@ -145,18 +145,6 @@ function sourceDefaultRspackDependencies(config) { return { framework, rspack, rspackDevServer }; } exports.sourceDefaultRspackDependencies = sourceDefaultRspackDependencies; -// export function getMajorVersion(json: PackageJson, acceptedVersions: T[]): T { -// const major = Number(json.version.split('.')[0]) -// if (!acceptedVersions.includes(major as T)) { -// throw new Error( -// `Unexpected major version of ${json.name}. ` + -// `Cypress-rspack-dev-server works with ${json.name} versions ${acceptedVersions.join( -// ', ', -// )} - saw ${json.version}`, -// ) -// } -// return Number(major) as T -// } function restoreLoadHook() { ; module_1.default._load = originalModuleLoad; diff --git a/dist/loader.js b/dist/loader.js index d73ef36..6875b45 100644 --- a/dist/loader.js +++ b/dist/loader.js @@ -61,7 +61,7 @@ function buildSpecs(projectRoot, files = []) { // Runs the tests inside the iframe function loader() { const ctx = this; - // In Webpack 5, a spec added after the dev-server is created won't + // A spec added after the dev-server is created won't // be included in the compilation. Disabling the caching of this loader ensures // we regenerate our specs and include any new ones in the compilation. ctx.cacheable(false); diff --git a/dist/makeRspackConfig.d.ts b/dist/makeRspackConfig.d.ts index c18b510..b14aa59 100644 --- a/dist/makeRspackConfig.d.ts +++ b/dist/makeRspackConfig.d.ts @@ -2,7 +2,7 @@ import type { CreateFinalRspackConfig } from './createRspackDevServer'; export declare const CYPRESS_RSPACK_ENTRYPOINT: string; /** - * Creates a rspack 0 compatible rspack "configuration" + * Creates a rspack compatible rspack "configuration" * to pass to the sourced rspack function */ export declare function makeRspackConfig(config: CreateFinalRspackConfig): Promise<{ diff --git a/dist/makeRspackConfig.js b/dist/makeRspackConfig.js index 8bc05d9..d674434 100644 --- a/dist/makeRspackConfig.js +++ b/dist/makeRspackConfig.js @@ -25,7 +25,7 @@ const removeList = [ exports.CYPRESS_RSPACK_ENTRYPOINT = path.resolve(__dirname, 'browser.js'); /** * Removes and/or modifies certain plugins known to conflict - * when used with cypress-rspack-dev-server. + * when used with @rspack/dev-server. */ function modifyRspackConfigForCypress(rspackConfig) { if (rspackConfig === null || rspackConfig === void 0 ? void 0 : rspackConfig.plugins) { @@ -40,7 +40,7 @@ async function getRspackConfigFromProjectRoot(projectRoot) { return await findUp(constants_1.configFiles, { cwd: projectRoot }); } /** - * Creates a rspack 0 compatible rspack "configuration" + * Creates a rspack compatible rspack "configuration" * to pass to the sourced rspack function */ async function makeRspackConfig(config) { diff --git a/package.json b/package.json index cfeb724..b17c3d1 100644 --- a/package.json +++ b/package.json @@ -7,11 +7,12 @@ "build": "pnpm tsc || echo 'built, with type errors'", "build-prod": "pnpm build", "check-ts": "pnpm tsc --noEmit", - "dev": "DEBUG=cypress:rspack-dev-server:* tsc --watch", + "dev": "pnpm with:comment tsc --watch", "clean": "rimraf dist", - "cypress:run": "pnpm cypress:run-cypress-in-cypress node ../../scripts/cypress run --project . --browser chrome", - "cypress:run-cypress-in-cypress": "cross-env CYPRESS_INTERNAL_E2E_TESTING_SELF_PARENT_PROJECT=1 HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS=http://localhost:4455 CYPRESS_REMOTE_DEBUGGING_PORT=6666 TZ=America/New_York", - "cypress:open": "pnpm cypress:run-cypress-in-cypress gulp open --project .", + "cypress:run": "cypress run --component --project ./cypress --browser chrome --config-file config/cypress.config.ts", + "cypress:run-with-comment": "pnpm with:comment cypress run --component --project ./cypress --browser chrome --config-file config/cypress.config.ts", + "cypress:open": "cypress open --component --project ./cypress --browser chrome --config-file config/cypress.config.ts", + "with:comment": "cross-env DEBUG=cypress-rspack-dev-server:*", "lint": "eslint .", "test": "jest" }, @@ -50,6 +51,8 @@ "path": "^0.12.7", "prettier": "^3.1.0", "proxyquire": "2.1.3", + "react": "^18.2.0", + "react-dom": "^18.2.0", "sinon": "^13.0.1", "snap-shot-it": "^7.9.6", "ts-node": "^10.9.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 69982a4..d6ba1bf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -103,6 +103,12 @@ devDependencies: proxyquire: specifier: 2.1.3 version: 2.1.3 + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) sinon: specifier: ^13.0.1 version: 13.0.1 @@ -5164,6 +5170,13 @@ packages: wrap-ansi: 6.2.0 dev: true + /loose-envify@1.4.0: + resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} + hasBin: true + dependencies: + js-tokens: 4.0.0 + dev: true + /lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} dependencies: @@ -5679,6 +5692,16 @@ packages: iconv-lite: 0.4.24 unpipe: 1.0.0 + /react-dom@18.2.0(react@18.2.0): + resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} + peerDependencies: + react: ^18.2.0 + dependencies: + loose-envify: 1.4.0 + react: 18.2.0 + scheduler: 0.23.0 + dev: true + /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: true @@ -5687,6 +5710,13 @@ packages: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} + /react@18.2.0: + resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} + engines: {node: '>=0.10.0'} + dependencies: + loose-envify: 1.4.0 + dev: true + /readable-stream@2.3.8: resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==} dependencies: @@ -5854,6 +5884,12 @@ packages: /safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} + /scheduler@0.23.0: + resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} + dependencies: + loose-envify: 1.4.0 + dev: true + /schema-utils@3.1.2: resolution: {integrity: sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==} engines: {node: '>= 10.13.0'} diff --git a/src/helpers/sourceRelativeRspackModules.ts b/src/helpers/sourceRelativeRspackModules.ts index ca7e60c..0627255 100644 --- a/src/helpers/sourceRelativeRspackModules.ts +++ b/src/helpers/sourceRelativeRspackModules.ts @@ -225,21 +225,6 @@ export function sourceDefaultRspackDependencies( return { framework, rspack, rspackDevServer } } -// export function getMajorVersion(json: PackageJson, acceptedVersions: T[]): T { -// const major = Number(json.version.split('.')[0]) - -// if (!acceptedVersions.includes(major as T)) { -// throw new Error( -// `Unexpected major version of ${json.name}. ` + -// `Cypress-rspack-dev-server works with ${json.name} versions ${acceptedVersions.join( -// ', ', -// )} - saw ${json.version}`, -// ) -// } - -// return Number(major) as T -// } - export function restoreLoadHook() { ;(Module as ModuleClass)._load = originalModuleLoad ;(Module as ModuleClass)._resolveFilename = originalModuleResolveFilename diff --git a/src/loader.ts b/src/loader.ts index 8d84656..f5edf7c 100644 --- a/src/loader.ts +++ b/src/loader.ts @@ -75,7 +75,7 @@ function buildSpecs(projectRoot: string, files: Cypress.Cypress['spec'][] = []): export default function loader(this: unknown) { const ctx = this as CypressCTRspackContext & LoaderContext - // In Webpack 5, a spec added after the dev-server is created won't + // A spec added after the dev-server is created won't // be included in the compilation. Disabling the caching of this loader ensures // we regenerate our specs and include any new ones in the compilation. ctx.cacheable(false) diff --git a/src/makeRspackConfig.ts b/src/makeRspackConfig.ts index 3f761c5..643e4a3 100644 --- a/src/makeRspackConfig.ts +++ b/src/makeRspackConfig.ts @@ -29,7 +29,7 @@ export const CYPRESS_RSPACK_ENTRYPOINT = path.resolve(__dirname, 'browser.js') /** * Removes and/or modifies certain plugins known to conflict - * when used with cypress-rspack-dev-server. + * when used with @rspack/dev-server. */ function modifyRspackConfigForCypress(rspackConfig: Partial) { if (rspackConfig?.plugins) { @@ -52,7 +52,7 @@ async function getRspackConfigFromProjectRoot(projectRoot: string) { } /** - * Creates a rspack 0 compatible rspack "configuration" + * Creates a rspack compatible rspack "configuration" * to pass to the sourced rspack function */ export async function makeRspackConfig(config: CreateFinalRspackConfig) { diff --git a/tsconfig.json b/tsconfig.json index 00ce542..5beb299 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,7 +28,7 @@ /* Module Resolution Options */ // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ - // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ + "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ // "typeRoots": [], /* List of folders to include type definitions from. */