riot-testing-library

API

render

• render({container, target, ...componentOptions}) => { container, unmount, rerender }: render method to mount a component which include your custom hook

  • container: The HTML element the component is mounted into.

    default : document.body

  • target: The HTML element the component is mounted.

    default : container.appendChild(document.createElement('div'))

  • componentOptions: The component props

Result

• container: container
• component: created riot component
• render(options): method of rerender component
• unmount(): method of unmount component
• debug(): method of log current dom
• ...queries: Returns all query functions that are binded to the target.

cleanup

Unmounts the component from the container and destroys the container.

afterEach(() => {
  cleanup()
})

also export all api from @testing-library/dom

Demo

Component

<app>
  <p data-testid="count">{ state.count }</p>
  <button data-testid="button" onclick={add}>button</button>
  <script>
    export default {
      onBeforeMount(props) {
        this.state = {
          count: props.count || 0
        }
      },
      add() {
        this.update({ count: this.state.count + 1 })
      },
    }
  </script>
</app>

Test

import render, { cleanup, fireEvent } from 'riot-testing-library'
import TestTag from './test.tag'

afterEach(() => {
  cleanup()
})

test('should show count text  when rendered', () => {
  const { queryByTestId } = render(TestTag, {count: 10});
  expect(queryByTestId('count').textContent).toBe("10");
})

test('should add count when click add button text', async () => {
    const { queryByTestId } = render(TestTag, {count: 1});
    expect(queryByTestId('count').textContent).toBe("1");
    fireEvent.click(queryByTestId('button'))
    expect(queryByTestId('count').textContent).toBe("2");
})