cypress-rspack-dev-server
Version:
Launches Rspack Dev Server for Component Testing
106 lines (78 loc) • 4.69 kB
Markdown
# cypress-rspack-dev-server
Based off the amazing work of the cypress team at https://github.com/cypress-io/cypress/blob/develop/npm/webpack-dev-server/
Implements the APIs for Cypress Component-testing with Rust-based web bundler [Rspack](https://www.rspack.dev/)'s dev server.
## Installation
Install the library to your devDependencies
```bash
npm install -D cypress-rspack-dev-server
```
> **Requires Cypress >= 15.17.0.** Rspack v2 relies on `import.meta.dirname`,
> which is only handled correctly by the tsx version bundled with Cypress
> 15.17.0 and later. On older Cypress releases the dev server will fail to
> start. If you must stay on Cypress < 15.17.0, use `cypress-rspack-dev-server@2.0.0`.
## Usage
```ts
import { devServer } from 'cypress-rspack-dev-server'
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer(devServerConfig) {
return devServer({
...devServerConfig,
framework: 'react',
rspackConfig: require('./rspack.config.js'),
})
},
},
})
```
## Dev server parameters
| Option | NOTES |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| framework | `react`, currently only `react`, will support other frameworks |
| cypressConfig | [Cypress Plugin Configuration](https://github.com/cypress-io/cypress/blob/6766a146dbcad98da2777d4005bc182c9d0475b8/cli/types/cypress.d.ts#L3539) |
| specs | Array of [Cypress Spec](https://github.com/cypress-io/cypress/blob/6766a146dbcad98da2777d4005bc182c9d0475b8/cli/types/cypress.d.ts#L292C19-L292C19) |
| devServerEvents | [Nodejs EventEmitter](https://nodejs.org/en/learn/asynchronous-work/the-nodejs-event-emitter) |
| rspackConfig (Optional) | [Rspack Configuration](https://github.com/web-infra-dev/rspack/blob/12dbc8659f9e9bd16b4bba7ee6135e63364f3975/packages/rspack/src/config/zod.ts#L1180C3-L1180C3), can be `require` from rspack config file |
| onConfigNotFound (Optional) | The callback function when config not found |
## Rsbuild Support
```
import config from './rsbuild.config.ts';
async devServer(devServerConfig) {
const rsbuild = await createRsbuild({ rsbuildConfig: config });
const rsbuildConfigs = await rsbuild.initConfigs();
const rspackConfig = rsbuildConfigs[0];
rspackConfig?.module?.rules?.push({
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['istanbul'],
},
},
enforce: 'post',
});
return devServer({
...devServerConfig,
framework: 'react',
rspackConfig: rspackConfig,
});
}
```
## Migration
### v1 (Cypress 14+)
In version 1, we support the [Cypress 14 's justInTimeCompile](https://docs.cypress.io/app/references/changelog#14-0-0), the specs structure has been updated.
If you still use Cypress <= 13, please use the version 0.0.x.
### v2 (Rspack v2 support)
In version 2, we support Rspack v2 (2.0.0-rc and above). If you are using Rspack v1, please use the version 1.x.x.
### v2.1 (Cypress 15.17+ required)
Version 2.1.0 removed an internal workaround for a tsx `import.meta.dirname`
bug. The fix now lives in Cypress itself (which bundles tsx >= 4.21.1 starting
in **Cypress 15.17.0**), so this package now requires **Cypress >= 15.17.0**.
If you are on an older Cypress, stay on `cypress-rspack-dev-server@2.0.0` until
you can upgrade Cypress.
## License
[](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
This project is licensed under the terms of the [MIT license](/LICENSE).