프론트엔드에서의 테스트

테스트 도입 이유

예기치 못한 빌드 오류

컴포넌트 주도 개발

리팩토링에는 테스트가 필요하다

리팩토링은 분명 가치있는 독구지만, 그것만으로는 부족하다. 리팩터링을 제대로 하려면 불가피하게 저지르는 실수를 잡아주는 견고한 테스트 스위트(test suite) 가 뒷받침 돼야 한다.

- 마틴 파울러의 리팩터링 2판

테스트 환경 구축하기

Storybook

1npx storybook@latest init
2

preview를 통해 스토리 래핑하기

1const preview: Preview = {
2  parameters: {
3    actions: { argTypesRegex: '^on[A-Z].*' },
4    controls: {
5      matchers: {
6        color: /(background|color)$/i,
7        date: /Date$/i,
8      },
9    },
10    layout: 'centered',
11  },
12
13  decorators: [
14    (Story) => {
15      localStorage.setItem('dark_mode', '0');
16
17      return (
18        <ThemeContextProvider>
19          <ModalContextProvider>
20            <PostViewProvider>
21              <div
22                id="default-padding"
23                style={{
24                  padding: '16px',
25                }}
26              >
27                <Story />
28              </div>
29            </PostViewProvider>
30          </ModalContextProvider>
31        </ThemeContextProvider>
32      );
33    },
34  ],
35};
36

1decorators: [
2    (Story) => {
3      localStorage.setItem('dark_mode', '0');
4
5      return (
6        <ThemeContextProvider>
7          <ModalContextProvider>
8            <PostViewProvider>
9              <div
10                id="default-padding"
11                style={{
12                  padding: '16px',
13                }}
14              >
15                <Story />
16              </div>
17            </PostViewProvider>
18          </ModalContextProvider>
19        </ThemeContextProvider>
20      );
21    },
22  ],
23

렌더링 케이스를 위한 유틸리티 컴포넌트

1. 현재 어플리케이션이 다크 모드인가?
2. 현재 포스트 리스트가 가로 보기 인가?

1. 라이트모드 / 가로 보기
2. 라이트모드 / 2개씩 보기
3. 다크모드 / 가로 보기
4. 다크모드 / 2개씩 보기

라이트모드 / 2개씩 보기

1export const Default: Story = {
2  name: '포스트 카드',
3
4  decorators: [
5    (Story) => {
6      return (
7        <RowPostCardRenderer rowMode={false}>
8          <Story />
9        </RowPostCardRenderer>
10      );
11    },
12  ],
13};
14

1export const RowPostCardRenderer = ({ children, rowMode }: RowPostCardRendererProps) => {
2  const { changePostView } = usePostView();
3
4  useEffect(() => {
5    if (rowMode) {
6      changePostView(1);
7    } else {
8      changePostView(2);
9    }
10  }, []);
11
12  return <>{children}</>;
13};
14

라이트모드 / 가로 보기

1export const DefaultRow: Story = {
2  name: '포스트 카드 (가로보기)',
3
4  decorators: [
5    (Story) => {
6      return (
7        <RowPostCardRenderer rowMode={true}>
8          <Story />
9        </RowPostCardRenderer>
10      );
11    },
12  ],
13};
14

다크모드 / 2개씩 보기

1export const Darkmode: Story = {
2  name: '포스트 카드 (다크 모드)',
3
4  decorators: [
5    (Story) => {
6      return (
7        <DarkmodeRenderer>
8          <RowPostCardRenderer rowMode={false}>
9            <Story />
10          </RowPostCardRenderer>
11        </DarkmodeRenderer>
12      );
13    },
14  ],
15};
16

1export const DarkmodeRenderer = ({ children }: PropsWithChildren) => {
2  const { toggleTheme } = useTheme();
3
4  useEffect(() => {
5    toggleTheme();
6  }, []);
7
8  return <>{children}</>;
9};
10

play를 통한 유저 인터랙션 구현

1export const Toggle: Story = {
2  name: '다크 모드',
3
4  play: async ({ canvasElement }) => {
5    const canvas = within(canvasElement);
6    const toggleButton = canvas.getByTestId('dark-mode');
7
8    await userEvent.click(toggleButton);
9  },
10};
11