【React】JestでSnapshotテストをしたいならCSS ModulesをやめてCSS-in-JSに切り替えよう

#ざっくり要約
- Reactのスタイリングの種類は`style属性`,`CSS Modules`,`CSS-in-JS`などがある
- `CSS Modules`は標準のCSSの記法で書けるため導入しやすいが、JestのSnapshotテストで使用することができない
- `style属性`はReact公式で非推奨なので、上記を考えると`CSS-in-JS`を採用するのがいいと判断した

#目次
[Reactのスタイリングのいろいろ](#reactのスタイリングのいろいろ)
[CSS ModulesはJestのSnapshotテストと相性が悪い](#css-modulesはjestのsnapshotテストと相性が悪い)
[CSS-in-JS(styled-components)でスナップショットテスト](#css-in-jsstyled-componentsでスナップショットテスト)
[まとめ](#まとめ)

#Reactのスタイリングのいろいろ
Reactのスタイリングには様々な手法があります。
例えば
### style属性にCSSPropertiesオブジェクトを渡すパターン

```tsx:style属性に渡すパターン.tsx
import React, { CSSProperties, FC } from "react";

export const Button: FC = () => {
    return (
        <span style={style}>
            <span>ボタン</span>
        </span>
    );
};

const style: CSSProperties = {
    alignItems: "center",
    backgroundColor: "orange",
    cursor: "pointer",
    display: "inline-flex",
    fontSize: "14px",
    fontWeight: "bold",
};

```

### CSS Modulesを使用するパターン

```tsx:CSSModulesを使用した例.tsx
import styles from "./button.module.css";

export const Button: FC = () => {
    return (
        <span className={styles.button}>
            <span>ボタン</span>
        </span>
    );
};
```

```css:button.module.css
.button {
    align-items: center;
    background-color: orange;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: bold;
}
```

### CSS-in-JSを使用するパターン
※CSS in JSには様々なツールがありますが、今回はstyled-componentsを使用した例を紹介します。

```tsx:styled-componentsを使用した例.tsx
import React, { FC } from "react";
import styled from "styled-components";

export const TextButton: FC = () => {
    return (
        <Body>
            <span>ボタン</span>
        </Body>
    );
};

const Body = styled.span`
    align-items: center;
    background-color: orange;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: bold;
`;
```

このようにReactでは、スタイリングだけで様々な手法があるので、サービス開発をする上でどのスタイリング手法を選択するべきか開発者の頭を悩ませます。

#CSS ModulesはJestのSnapshotテストと相性が悪い
数多あるスタイリング手法の中で、自分は元々CSS Modulesを採用していました。

- 通常のCSSの記法で書けるため、学習コストが低い
- スコープをコンポーネント内部に閉じ込めることができる

ことが主な理由でした。

ですが、各コンポーネントごとでJestのスナップショットテストを実施しようとすると下記のようなエラーになります。

```tsx:Button.spec.tsx
import React from "react";
import renderer from "react-test-renderer";
import { Button } from "../Button";

test("Button", () => {
    const component = renderer.create(<Button />);
    const tree = component.toJSON();

    expect(tree).toMatchSnapshot();
});
```

![スクリーンショット 2021-03-28 7.54.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202053/f7c2961c-e3c3-2e54-e661-cf26772ab9d3.png)

jestだとCSS Modulesを読み込むことができないため起きるエラーです。
`jest-css-modules`というライブラリを使用してjest.config.js内に下記のような設定をするとエラーの回避はできるようになります。

```js:jest.config.js
module.exports = {
    ...
    moduleNameMapper: {
      "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules",
    },
    ...
};
```

ですが、このライブラリはjest内でバンドルする際にCSS Modulesを読み込んでいるわけではなく、単に上記エラーを回避しているだけなので、CSS Modulesのスタイルを変更しても、テストを通過してしまいます。

```css:button.module.css
.button {
    align-items: center;
    /* orangeをredに変更 */
    background-color: red;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: bold;
}
```

※スタイリング変更後もスナップショットテストが通ってしまう
![スクリーンショット 2021-03-28 8.13.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202053/09ee68d9-9085-02d9-8790-1fa84b799bf7.png)

スナップショットテストでスタイリングが反映されていないのはほとんど意味がないと思い、スタイリングの方式を切り替えることにしました。

#CSS-in-JS(styled-components)でスナップショットテスト
他の選択肢としては`style属性`を使ったスタイリングもありえますが、公式で非推奨とされています。

https://reactjs.org/docs/dom-elements.html#style

>Some examples in the documentation use style for convenience, but using the style attribute as the primary means of styling elements is generally not recommended.
>便宜上style属性をドキュメント内で使用していますが、要素のスタイリングとしてスタイル属性を使うことは一般的に推奨されていません。

そのため、CSS-in-JS(styled-components)を採用したいと思いますが、その前に、Snapshotテストでスタイリングの変更が検知できるか確認をします。

```tsx:styled-componentsを使用した例(変更前).tsx
import React, { FC } from "react";
import styled from "styled-components";

export const TextButton: FC = () => {
    return (
        <Body>
            <span>ボタン</span>
        </Body>
    );
};

const Body = styled.span`
    align-items: center;
    background-color: orange;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: bold;
`;
```

これでスナップショットを取り、
![スクリーンショット 2021-03-28 8.35.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202053/c4e10d56-edf1-b231-f9d9-f2219b7f0de9.png)

スタイルを少し変更します。

```tsx:styled-componentsを使用した例(変更後).tsx
import React, { FC } from "react";
import styled from "styled-components";

export const TextButton: FC = () => {
    return (
        <Body>
            <span>ボタン</span>
        </Body>
    );
};

const Body = styled.span`
    align-items: center;
    /* orangeをredに変更 */
    background-color: red;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: bold;
`;
```

スナップショットテストが失敗したことが確認できました。
![スクリーンショット 2021-03-28 8.39.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202053/51cff37f-baee-ad04-8a9a-648db5ebad5f.png)

ただ、この差分の内容だと、styled-componentsが自動生成したclassNameが変わっていることは確認できますが、具体的なスタイルの変更内容までは分かりません。
それでも、自分が行ったスタイルの修正がどのコンポーネントに影響を及ぼしているのか分かると、スナップショットテストの有用性は高まると考えています。

#まとめ
Reactのスタイリング手法は、`CSS-in-JS`だけでも今回紹介した`styled-components`以外に`styled-jsx`などがあったり、本当に様々な選択肢があります。
今回はスナップショットテストとの相性という観点でのスタイリング手法の選択の意思決定をまとめてみました。

またpros,cons比較すると違う選択もありえるかもしれないので、その際にはまたアップデートして記事として紹介したいと思います。