Professional Documents
Culture Documents
Component Testing Config 1
Component Testing Config 1
Component Testing Config 1
When you launch Cypress for the first time in a project, the app will automatically
guide you through setup and configuration. You don't need to do anything additional
to get started.
Below are more advanced configuration options you can customize to fit your
project.
The index file allows you to add in global assets, such as styles, fonts, and
external scripts.
You can provide an alternative path to the file using the indexHtmlFile option in
the component config options:
{
component: {
devServer,
indexHtmlFile: '/custom/path/to/component-index.html'
}
}
The function's signature takes in an object with the following properties as its
only parameter and needs to resolve an object containing the port of your dev
server and a callback to shut it down.
interface DevServerOptions {
specs: Cypress.Spec[]
cypressConfig: Cypress.PluginConfigOptions
devServerEvents: NodeJS.EventEmitter
}
cypress.config.js
cypress.config.ts
const { defineConfig } = require('cypress')
module.exports = defineConfig({
component: {
async devServer({ specs, cypressConfig, devServerEvents }) {
const { port, close } = await startDevServer(
specs,
cypressConfig,
devServerEvents
)
return {
port,
close,
}
},
},
})
app.get(
cypressConfig.devServerPublicPathRoute + '/index.html',
async (_req, res) => {
// read custom index.html file
const html = await fs.readFile(
path.join(cypressConfig.repoRoot, cypressConfig.indexHtmlFile),
{ encoding: 'utf8' }
)
// inject kickstart-script
const output = html.replace(
'</head>',
`<script type="module">${clientScript}</script></head>`
)
res.send(output)
}
)
app.listen(port)
}
For a real-world example, you can refer to this loader used by the Vite Dev Server.
The client script must retrieve information on the currently active test from the
Cypress instance of the parent frame and load the corresponding bundle. If a
support file is defined, it should be injected at the top of your test bundle or
loaded before the test script.
// load the spec - you can extend the load function to also load css
const { relative } = CypressInstance.spec
importPromise = importPromise.then(
() => import(`${devServerPublicPathRoute}/${relative}`)
)
For a more complete example you can check out the kickstart script used in the
vite-devserver.
The devServerEvents event emitter should be used to notify cypress about finished
builds by emitting a dev-server:compile:success event and to listen for the dev-
server:specs:changed event that will notify you about changed entry points.
{
component: {
specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}'
}
}