Taro.js 2.x Тестирование утилит: Просто и эффективно

Taro-testing-library — это набор утилит для тестирования Taro.js, которые способствуют внедрению лучших практик тестирования.

Установка

// с помощью yarn
yarn add taro-testing-library -D
// или с помощью npm
npm install taro-testing-library -D

Для Taro 3.x и React можно использовать react-testing-library напрямую. Требуется только настроить moduleNameMapper в jest.config.js следующим образом:

{
  moduleNameMapper: {
    '@tarojs/components': '@tarojs/components/dist-h5/react',
    ...
  },
}

Использование

В файле конфигурации jest установите preset на «taro-testing-library»:

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

API

render(Component, { container, target }) => { container, unmount, rerender } — метод рендеринга для монтирования компонента.

• container — элемент HTML, в который монтируется компонент. По умолчанию — document.body.
• target — элемент HTML, на который монтируется компонент. По умолчанию — container.appendChild(document.createElement('div')).

Результат:

• container — контейнер.
• component — созданный компонент Taro.js.
• rerender(Component) — метод повторного рендеринга компонента.
• unmount() — метод размонтирования компонента.
• debug() — метод логирования текущего DOM.
• ...queries — возвращает все функции запросов, привязанные к цели.

renderToString(Component) => string — экспорт из nerv-server, который можно использовать для сопоставления снимков.

cleanup() автоматически вызывается после каждого теста, если тестируемый фреймворк поддерживает afterEach (например, mocha, Jest, Jasmine). Однако вы можете пропустить автоматическую очистку, установив переменную среды TTL_SKIP_AUTO_CLEANUP в значение «true».

Чтобы упростить задачу, вы также можете просто импортировать taro-testing-library/dont-cleanup-after-each, что сделает то же самое.

Демо

Компонент:

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>
  );
};

Тест:

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

test('должен отображать компонент', () => {
  const { container } = render(<Counter />);
  const $number = container.querySelector('.number');
  expect($number.innerHTML).toEqual('1');
});

test('должен повторно отображаться при срабатывании хуков setState', () => {
  const { container } = render(<Counter />);
  const $number = container.querySelector('.number');
  act(() => {
    $number.click()
  })
  expect($number.innerHTML).toEqual(`2`);
});

it('должен поддерживать снимок', () => {
  const component = renderToString(<div>компонент без состояния</div>);
  expect(component).toMatchSnapshot();
})