GoogleのMaterialデザインをベースに開発された、ウェブ開発をより高速かつ簡単にするReactコンポーネント

Material-UI

Amazon.comにより提供されているクラウドコンピューティングサービス

コンピュータプログラムで問題を解決するための手順や計算方法のこと

Algorithm

継続的インテグレーション＆継続的デリバリーの略で、アプリケーションの構築、テスト、および展開の自動化を指す

CI/CD

コンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのDocker​社製オープンソースソフトウェア

Docker

GitHub社によって運営されているソースコードの変更履歴を管理するホスティングサービス

GitHub

静的なHTMLをベースに、JavaScriptを用いたAPIを通じて動的なコンテンツを扱うWebサービスのアーキテクチャ

Jamstack

Facebook社がOSSとして開発を進めているJavaScript用テスティングフレームワーク

Jest

MVCモデルでWebアプリケーションを開発できるオープンソースWebアプリケーションフレームワーク

Laravel

Oracle社が中心となって開発しているオープンソースのリレーショナルデータベース管理システム

MySQL

Vercel社がOSSとして開発を進めているReactベースのフロントエンドフレームワーク

Next.js

The PHP Groupによってコミュニティベースで開発されているオープンソースの汎用プログラミング言語。

Facebook社とコミュニティによって開発されているUI構築のためのJavaScriptライブラリ

React

マイクロソフトが開発・販売しているGUIを採用したオペレーティングシステムの製品群

Windows

Material-UI - Breathnote

Material-UIは、コンポーネントに一意の`id`や`class`、`aria-**`属性を自動で付与しますが、これらの採番には`Math.random`が使われているようで、生成されるコードには、毎回差分が発生します。

上記の仕様は、スナップショットテストも例外でないため、テスト結果に影響を及ぼします。

<div className="codeblock-filename">テスト結果例</div>

```shell
    <button
-     aria-controls="mui-31907"
+     aria-controls="mui-25430"
      aria-haspopup="true"
      aria-label="Menu"
      class="MuiButtonBase-root MuiIconButton-root"
-     id="mui-56827"
+     id="mui-85534"
      tabindex="0"
      title="Menu"
      type="button"
    >
```

発生する差分が`class`属性だけであれば、[こちらの方法](https://lightbulbcat.hatenablog.com/entry/2019/08/15/032839)で対処できますが、今回は、`id`属性と`aria-controls`属性が対象だったため、別のアプローチで解決する必要がありました。

- [[TablePagination] Snapshot test issue](https://github.com/mui-org/material-ui/issues/21293#issuecomment-654921524)

## 対処法

`render`の結果をDOM Stringに変換し、`replace`メソッドで対象の属性を排除します。

<div className="codeblock-filename">Example.test.tsx</div>

```tsx
describe(`***`, () => {
  afterEach(cleanup)

  test('スナップショット', () => {
    const { container } = render(<DataGrid />)

    // https://github.com/mui-org/material-ui/issues/21293#issuecomment-654921524
    const tree = container.innerHTML.replace(/id="mui-[0-9]*"/g, '').replace(/aria-controls="(mui-[0-9]* *)*"/g, '')

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

注意点として、スナップショットの結果を1行の文字列で返すようになるため、`asFragment`よりもテスト結果が確認しづらくなります。

## 所感

本件では、ローカルの他に、GitHub Actionsでもテストを実施しており、`jest -u`で強引に更新したくなかったため、今回の措置を行いました。

テストの実施がローカルだけであれば、必要ない措置かもしれません。

React Testing LibraryとJestを用いて、Material-UIコンポーネントをテストしていたのですが、スナップショットテストを実施するたびにコンポーネントの属性値が変動してしまったので、これを解消します。

React Testing Libraryのスナップショットテストで、Material-UIの属性値に差分が出る

Next.js × Material-UI × react-springでモーダルを作っていた時に遭遇したエラーです。

[Material-UIのデモ](https://material-ui.com/ja/components/modal/#transitions)をコピペしただけなんですけどね。

ちなみに公式のサンドボックスでも同じエラーが出てました。

- [Cannot update a component while rendering a different component warning for Modal component for React v16.13.0](https://github.com/mui-org/material-ui/issues/23176)

## エラー内容

<div className="codeblock-filename">shell</div>

```shell
Warning: Cannot update a component (`ForwardRef(Modal)`) 
  while rendering a different component (`ForwardRef(Fade)`).

To locate the bad setState() call inside `ForwardRef(Fade)`
  follow the stack trace as described in https://reactjs.org/link/setstate-in-render
```

## 解決法

私の場合は、react-springのバージョンをv8からv9にアップデートしたら消えました。

<div className="codeblock-filename">shell</div>

```shell
yarn add react-spring@next
```

パッケージ名だけだとv8がインストールされるので、`@next`で明示的にv9をインストールしましょう。

Next.js × Material-UI × react-spring環境で、モーダルを作成した際に遭遇した「Warning: Cannot update a component (ForwardRef(Modal)) while rendering a different component (ForwardRef(Fade)).」というエラーを解決します。

Material-UI

React Testing Libraryのスナップショットテストで、Material-UIの属性値に差分が出る

Material-UIとreact-springの併用でエラー（Cannot update a component ForwardRef Modal ...）