taro-testing-library

Simple and complete taro.js testing utilities that encourage good testing practices.

Install

// use yarn
yarn add taro-testing-library -D
// use npm
npm install taro-testing-library -D

Usage

set preset in your jest config file

{
  "preset": "taro-testing-library"
}

API

API

render

• render(Component, { container, target }) => { container, unmount, rerender }: render method to mount a component

  • 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'))

Result

• container: container
• component: created Taro.js component
• rerender(Component): 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.

renderToString

renderToString(Component) => string: export from nerv-server, you can use it to match snapshot

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 TTL_SKIP_AUTO_CLEANUP env variable to 'true'.

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

Demo

Component

import Taro, { useState } from '@tarojs/taro';
import { Text } from '@tarojs/components';

const Counter = (props) => {
  const { initial = 1 } = props;
  const [count, setCount] = useState(initial)
  return (
    <Text onClick={() => {setCount(count+1)}} className="number">
      {count}
    </Text>
  );
};

Test

import Taro from '@tarojs/taro';
import { act, render } from 'taro-testing-library';

test('should render component', () => {
  const { container } = render(<Counter />);
  const $number = container.querySelector('.number');
  expect($number.innerHTML).toEqual('1');
});

test('should rerender when trigger setState hooks', () => {
  const { container } = render(<Counter />);
  const $number = container.querySelector('.number');
  act(() => {
    $number.click()
  })
  expect($number.innerHTML).toEqual(`2`);
});

it('should support snapshot', () => {
  const component = renderToString(<div>component without state</div>);
  expect(component).toMatchSnapshot();
})