test-callbag-jsx

A simple utility for testing callbag-jsx code.

npm i --save-dev test-callbag-jsx

👉 Testing-framework agnostic
👉 Isolated document and renderer for testing
👉 Emulate user interaction (using @testing-library/user-event)

Usage

// removable-hellow.tsx

import state from 'callbag-state'
import { ref } from 'render-jsx/common'


export function RemovableHellow({ name }, renderer) {
  const div = ref()
  const typed = state('')

  return <div _ref={div}>
    <p>Hellow {name}:: {typed}!</p>
    <input type='text' _state={typed}/>
    <button onclick={() => renderer.remove(div.$)}>REMOVE</button>
  </div>
}

// removable-hellow.test.tsx

import { testRender } from 'test-callbag-jsx'

import { should } from 'chai'
import { RemovableHellow } from './removable-hellow'

should()

describe('RemovableHellow', () => {
  it('should say hellow and then be removed when clicked', () => {

    testRender((renderer, { render, $ }) => {
      render(<RemovableHellow name='Jack'/>)
      $('p').text().should.equal('Hellow Jack:: !')

      $('input').type('I just typed this')
      $('p').text().should.equal('Hellow Jack:: I just typed this!')

      $('button').click()
      expect($('p').exists()).to.be.false
    })

  })
})

👉 Read the Docs

Contribution

Be nice and respectful. Useful commands for development:

git clone https://github.com/loreanvictor/test-callbag-jsx.git

npm i             # --> install dependencies

npm test          # --> run tests