Browser-based Component Testing for SolidJS with Cypress.io 🧡
npm install @dream2023/cypress-ct-solid-jsMount SolidJS components in the open source Cypress.io test runner v10.7.0+
- Requires SolidJS >= 1
- Requires Cypress v12.7.0 or later
- Requires Node version 12 or above
``sh`
npm install --save-dev cypress @dream2023/cypress-ct-solid-js
`ts`
// cypress.config.ts
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer: {
framework: '@dream2023/cypress-ct-solid-js',
bundler: 'vite',
},
},
})
Open cypress test runner
`bash`
npx cypress open --component
If you need to run test in CI
`bash`
npx cypress run --component
For more information, please check the official docs for running Cypress and for component testing.
`tsx
import { mount, runHook, runAsyncHook } from '@dream2023/cypress-solidjs'
const HelloWorld = () =>
Hello World!
;const useCounter = (): { count: Accessor
const [count, setCount] = createSignal
const inc = () => {
setCount(count => count + 1)
}
return { count, inc }
}
const useDelay = (time: number) => {
const [done, setDone] = createSignal(false);
setTimeout(() => {
setDone(true)
}, time)
return done
}
describe('HelloWorld component', () => {
it('render component', () => {
mount(() =>
cy.contains('Hello World!')
})
it('hook', () => {
runHook(() => {
const { count, inc } = useCounter()
expect(count()).to.be.eq(0)
inc()
expect(count()).to.be.eq(1)
})
})
it('async hook', () => {
return runAsyncHook(async () => {
const time = 1000
const done = useDelay(time)
expect(done()).to.eq(false)
await new Promise((resolve) => {
setTimeout(() => {
resolve(undefined)
}, time)
})
expect(done()).to.eq(true)
})
})
})
`
Run yarn build to compile and sync packages to the cypress cli package.
Run yarn cy:open to open Cypress component testing against real-world examples.
Run yarn test` to execute headless Cypress tests.
This project is licensed under the terms of the MIT license.