Skip to content

Commit

Permalink
Experiment with rspack cypress
Browse files Browse the repository at this point in the history
  • Loading branch information
joshwooding committed Nov 11, 2024
1 parent b395246 commit dc77771
Show file tree
Hide file tree
Showing 6 changed files with 1,646 additions and 179 deletions.
2 changes: 0 additions & 2 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,6 @@ jobs:
run: yarn
- name: Setup react
run: yarn up react@${{ matrix.react }} react-dom@${{ matrix.react }}
- name: Build packages
run: yarn run build
- name: Cypress Components
uses: cypress-io/github-action@v6
with:
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ node_modules

# testing
/cypress/screenshots
/cypress/downloads
/coverage
.nyc_output

Expand Down Expand Up @@ -46,4 +47,4 @@ yarn-error.log*
# Autogenerated CSS
/docs/css/salt-core.css
/docs/css/salt-lab.css
/docs/css/salt-countries.css
/docs/css/salt-countries.css
98 changes: 14 additions & 84 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -1,92 +1,16 @@
import path from "node:path";
// @ts-ignore
import installCoverageTask from "@cypress/code-coverage/task";
import react from "@vitejs/plugin-react";
import { isCI } from "ci-info";
import { cssInline } from "css-inline-plugin";
import { defineConfig } from "cypress";
import { version as reactVersion } from "react";
import type { UserConfig } from "vite";
import IstanbulPlugin from "vite-plugin-istanbul";
import tsconfigPaths from "vite-tsconfig-paths";

async function getViteConfig(config: UserConfig) {
const { mergeConfig } = await import("vite");
let viteConfig: UserConfig = {
plugins: [react(), tsconfigPaths(), IstanbulPlugin(), cssInline()],
define: {
"process.env": {},
},
server: {
watch: {
ignored: ["**/coverage"],
},
},
build: {
sourcemap: true,
},
resolve: {
alias: {
"cypress/react18": !(
reactVersion.startsWith("16") || reactVersion.startsWith("17")
)
? "cypress/react18"
: "cypress/react",
},
},
};

if (reactVersion.startsWith("16") || reactVersion.startsWith("17")) {
viteConfig = mergeConfig(viteConfig, {
resolve: {
alias: {
"@storybook/react-dom-shim":
"@storybook/react-dom-shim/dist/react-16",
},
},
});
}

if (isCI) {
viteConfig = mergeConfig(viteConfig, {
resolve: {
alias: {
"@salt-ds/core": path.resolve(__dirname, "./dist/salt-ds-core"),
"@salt-ds/countries": path.resolve(
__dirname,
"./dist/salt-ds-countries",
),
"@salt-ds/data-grid": path.resolve(
__dirname,
"./dist/salt-ds-data-grid",
),
"@salt-ds/icons": path.resolve(__dirname, "./dist/salt-ds-icons"),
"@salt-ds/lab": path.resolve(__dirname, "./dist/salt-ds-lab"),
"@salt-ds/styles": path.resolve(__dirname, "./dist/salt-ds-styles"),
"@salt-ds/window": path.resolve(__dirname, "./dist/salt-ds-window"),
},
},
optimizeDeps: {
include: [
"@salt-ds/core",
"@salt-ds/data-grid",
"@salt-ds/lab",
"@salt-ds/icons",
],
},
} as UserConfig);
}

return mergeConfig(config, viteConfig);
}
import { devServer } from "cypress-rspack-dev-server";
import { merge } from "webpack-merge";
// import installCoverageTask from "@cypress/code-coverage/task";

export default defineConfig({
viewportWidth: 1280,
viewportHeight: 1024,
video: false,
component: {
setupNodeEvents(on, config) {
installCoverageTask(on, config);
// installCoverageTask(on, config);
//Setting up a log task to allow logging to the console during an axe test because console.log() does not work directly in a test
on("task", {
log(message: string) {
Expand All @@ -98,10 +22,16 @@ export default defineConfig({

return config;
},
devServer: {
framework: "react",
bundler: "vite",
viteConfig: getViteConfig,
devServer(devServerConfig) {
return devServer({
...devServerConfig,
framework: "react",
rspackConfig: merge(require("./rspack.config").default, {
experiments: {
incremental: !devServerConfig.cypressConfig.isTextTerminal,
},
}),
});
},
specPattern: "packages/**/src/**/*.cy.{js,ts,jsx,tsx}",
},
Expand Down
9 changes: 8 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"copy:icon:css": "yarn workspace @salt-ds/icons copy:css",
"copy:countries:css": "yarn workspace @salt-ds/countries copy:css",
"test": "vitest",
"test:components": "cypress run --component --browser chrome --headless",
"test:components": "CYPRESS_NO_COMMAND_LOG=1 cypress run --component --browser chrome",
"test:components:local": "cypress open --component --browser electron",
"prettier": "prettier --write .",
"prettier:ci": "prettier --check .",
Expand All @@ -48,6 +48,7 @@
"@fontsource/open-sans": "^4.5.13",
"@fontsource/pt-mono": "^5.0.12",
"@mswjs/data": "^0.16.1",
"@rspack/core": "^1.1.0",
"@storybook/addon-a11y": "^8.3.0",
"@storybook/addon-actions": "^8.3.0",
"@storybook/addon-docs": "^8.3.0",
Expand All @@ -65,6 +66,7 @@
"@storybook/test": "^8.3.0",
"@storybook/theming": "^8.3.0",
"@storybook/types": "^8.3.0",
"@swc/helpers": "^0.5.0",
"@tanstack/react-query": "^5.0.0",
"@testing-library/cypress": "^10.0.0",
"@testing-library/dom": "^10.0.0",
Expand All @@ -79,23 +81,28 @@
"ag-grid-enterprise": "^31.3.4",
"ag-grid-react": "^31.3.4",
"axe-core": "^4.9.0",
"babel-loader": "^9.1.3",
"chromatic": "^11.10.1",
"ci-info": "^4.0.0",
"clsx": "^2.0.0",
"css-loader": "^7.0.0",
"cypress": "^13.15.2",
"cypress-axe": "^1.5.0",
"cypress-real-events": "^1.13.0",
"cypress-rspack-dev-server": "^0.0.7",
"deepmerge": "^4.2.2",
"dom-accessibility-api": "^0.7.0",
"mockdate": "^3.0.5",
"msw": "^2.3.5",
"msw-storybook-addon": "^2.0.3",
"postcss-loader": "^8.0.0",
"prettier": "^3.3.3",
"react": "^18.3.1",
"react-docgen-typescript": "2.2.2",
"react-dom": "^18.3.1",
"rifm": "^0.12.0",
"storybook": "^8.3.0",
"style-loader": "^4.0.0",
"stylelint": "^16.0.0",
"typescript": "4.6.4",
"vite": "^5.0.0",
Expand Down
85 changes: 85 additions & 0 deletions rspack.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import path from "node:path";
import { defineConfig } from "@rspack/cli";
import { version as reactVersion } from "react";

const prod = true;

export default defineConfig({
target: "browserslist",
module: {
rules: [
{
test: /\.png$/,
type: "asset",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /packages\/.*\/src\/.*\.[tj]sx?$/,
use: ["babel-loader"],
},
{
test: /\.(j|t)s$/,
exclude: [/[\\/]node_modules[\\/]/],
loader: "builtin:swc-loader",
options: {
jsc: {
parser: {
syntax: "typescript",
},
externalHelpers: true,
transform: {
react: {
runtime: "automatic",
development: !prod,
refresh: !prod,
},
},
},
},
},
{
test: /\.(j|t)sx$/,
loader: "builtin:swc-loader",
exclude: [/[\\/]node_modules[\\/]/],
options: {
jsc: {
parser: {
syntax: "typescript",
tsx: true,
},
transform: {
react: {
runtime: "automatic",
development: !prod,
refresh: !prod,
},
},
externalHelpers: true,
},
},
},
],
},
resolve: {
tsConfig: {
configFile: path.resolve(__dirname, "./tsconfig.json"),
references: "auto",
},
alias: {
react: path.resolve(__dirname, "node_modules/react"),
"react-dom": path.resolve(__dirname, "node_modules/react-dom"),
"cypress/react18":
reactVersion.startsWith("16") || reactVersion.startsWith("17")
? "cypress/react"
: "cypress/react18",
"@storybook/react-dom-shim":
reactVersion.startsWith("16") || reactVersion.startsWith("17")
? "@storybook/react-dom-shim/dist/react-16"
: "@storybook/react-dom-shim",
},
extensions: ["...", ".ts", ".tsx", ".js", ".jsx", ".css"],
},
});
Loading

0 comments on commit dc77771

Please sign in to comment.