1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/thoughtworks-taro-testing-library

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Это зеркальный репозиторий, синхронизируется ежедневно с исходного репозитория.
Клонировать/Скачать
README.md 3.9 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 4 месяцев назад 8ec86cd

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

Комментарий ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://gitlife.ru/oschina-mirror/thoughtworks-taro-testing-library.git
git@gitlife.ru:oschina-mirror/thoughtworks-taro-testing-library.git
oschina-mirror
thoughtworks-taro-testing-library
thoughtworks-taro-testing-library
master