storybook의 storyshot 및 emotion으로 snapshot 테스트하는 방법

경위

storybook storyshot에서 snapshot 테스트를 도입했습니다.
그래서 emotion을 사용하고 있으며,이 아이가 무작위 클래스 이름을 자동 생성 해줍니다. (로직까지는 보지 않기 때문에, 왜 같은 패턴도 있을지는 모른다).

exports[`Storyshots button 1`] = `
<button
  className="css-z0t02t-Button ej1mrh80"
  type="button"
>
  button
</button>
`;

이것은 테스트마다 실패할 가능성이 있고, 실패한 이유를 모르기 때문에 테스트의 의미가 별로 없다. . .
그래서 좋은 방법은 없을까~라고 생각해 보았습니다.

설정 방법

storyshot을 넣지 않은 사람은 먼저 readme에 따라 설정하십시오.

jest-emotion 을 사용합니다.

npm install --save-dev jest-emotion

initStoryshots() 를 다음과 같이 수정

import initStoryshots from '@storybook/addon-storyshots';
import serializer from 'jest-emotion';

initStoryshots({
  snapshotSerializers: [serializer]
} as any);

에서 snapshot을 만들 때

exports[`Storyshots button 1`] = `
.emotion-0 {
  margin-right: 16px;
}
<button
  className="emotion-0 emotion-1"
  type="button"
>
  button
</button>
`;

이제 클래스 이름이 고정되어 스타일 차이가 나오므로 쉽게 확인할 수 있습니다.
다른 좋은 방법도있을 것 같아서 알고 있으면 알려주세요 m (_ _) m

initStoryshots로 객체를 any로 하고 있는 것.

문서에는 snapshotSerializers가 option으로 실려 있습니다만, 형태 정의에는 다음과 같이 되어 있습니다. (2019/08/26 현재)

export interface InitOptions<Rendered = any> {
    configPath?: string;
    suite?: string;
    storyKindRegex?: RegExp;
    storyNameRegex?: RegExp;
    framework?: string;
    test?: Test;
    renderer?: (node: JSX.Element) => Rendered;
    serializer?: (rendered: Rendered) => any;
    integrityOptions?: {};
}

그래서 우리는 다른 곳에서 도망 쳤습니다

htps : // 기주 b. 이 m / s와 ryboo kjs / s와 ryboo k / t ree / ms r / adon s / s, rysho ts / s 및 ryshotss 이것은 # s 인 p 쇼츠 리아제 rs