@dream2023/cypress-solidjs NPM

@dream2023/cypress-solidjs

Mount SolidJS components in the open source Cypress.io test runner v10.7.0+

Install

Requires SolidJS >= 1
Requires Cypress v10.7.0 or later
Requires Node version 12 or above

npm install --save-dev @dream2023/cypress-solidjs

Usage

// cypress.config.ts
import { defineConfig } from 'cypress'
export default defineConfig({
  component: {
    devServer: {
      bundler: 'vite',
    } as any,
  },
})

Run

Open cypress test runner

npx cypress open --component

If you need to run test in CI

npx cypress run --component

For more information, please check the official docs for running Cypress and for component testing.

Example

import { mount, runHook, runAsyncHook } from '@dream2023/cypress-solidjs'

const HelloWorld = () => <p>Hello World!</p>;

const useCounter = (): { count: Accessor<number>, inc: () => void } => {
  const [count, setCount] = createSignal<number>(0)
  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(() => <HelloWorld />)
    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)
    })
  })
})