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.

cleanup() is called after each test automatically by default if the testing framework you're using supports the afterEach global (like mocha, Jest, and Jasmine).

However, you may choose to skip the auto cleanup by setting the RIOT_TL_SKIP_AUTO_CLEANUP env variable to 'true'.

To make this even easier, you can also simply import riot-testing-library/dont-cleanup-after-each which will do the same thing.

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, { fireEvent } from 'riot-testing-library'
import TestTag from './test.tag'

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', () => {
    const { queryByTestId } = render(TestTag, {count: 1});
    expect(queryByTestId('count').textContent).toBe("1");
    fireEvent.click(queryByTestId('button'))
    expect(queryByTestId('count').textContent).toBe("2");
})