Использовать реагирующую библиотеку со стришотами?

Question

Можно ли использовать реагирующую библиотеку с надстройкой сборника рассказов? Я хотел бы создать несколько тестов для реагирующих компонентов, которые не используют фермент.

Answer 1

Возможно, немного поздно для вас, но просто смотрю на эту проблему. Это конфиг, который я придумал, который, кажется, работает для меня.

import initStoryshots from "@storybook/addon-storyshots";
import path from "path";
import { render } from "react-testing-library";


const reactTestingLibrarySerializer = {
  print: (val, serialize, indent) => serialize(val.container.firstChild),
  test: (val) => val && val.hasOwnProperty("container")
};

initStoryshots({
  configPath: path.join(__dirname, "..", "config", "storybook"),
  framework: "react",
  integrityOptions: { cwd: path.join(__dirname, "stories") },
  renderer: render,
  snapshotSerializers: [reactTestingLibrarySerializer],
  storyKindRegex: /^((?!.*?DontTest).)*$/
});

Секрет заключается в том, чтобы передать пользовательский сериализатор Jest для опции snapshotSerializers, которая получает контейнер из результата функции рендеринга и передает свой firstChild для сериализации.

Если вам нужно, вы можете изменить содержимое контейнера перед сериализацией, чтобы удалить нестабильные атрибуты или целые элементы с помощью API DOM.

Answer 2

Посмотрите на Applitools. Applitools можно использовать в React вместе с Storybook. Они также предлагают множество других SDK для интеграции с другими платформами. Работа с Applitools делает визуальное / пользовательское тестирование действительно увлекательным и интуитивно понятным!

Недавно они выпустили новый инструмент, анализ корневых причин (RCA). Этот инструмент помогает вам обнаружить визуальные различия и точно сказать, что вызывает разницу с точки зрения изменений DOM или CSS изменений. Таким образом, вам не нужно тратить свое время, пытаясь выяснить, что пошло не так, вы сосредоточены только на устранении проблемы. Действительно мощные инструменты для разработчиков.

Попробуй!