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

React

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

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

Algorithm

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

CI/CD

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

Docker

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

GitHub

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

Jamstack

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

Jest

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

Laravel

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

Material-UI

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

MySQL

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

Next.js

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

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

Windows

React - 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の属性値に差分が出る

react-springパッケージ内の`"sideEffects": false`が原因。

webpackのTree Shakingで不要物が混ざることにより発生するエラーとのこと。

- [@react-spring/core or @react-spring/three production errors](https://github.com/pmndrs/react-spring/issues/1078)

## 解決法

フレームワークにNext.jsを使っていたので、`next.config.js`に以下を追加しました。

<div className="codeblock-filename">next.config.js</div>

```js
module.exports = {
  // react-spring | https://github.com/pmndrs/react-spring/issues/1078
  webpack: (config) => {
    config.module.rules.push({
      test: /react-spring/,
      sideEffects: true,
    })
    return config
  },
}
```

react-springを用いたモーダルが、本番環境で「willAdvance is not a function ...」というエラーを吐いたので、これを解決します。

react-springが本番環境でエラー（willAdvance is not a function ...）

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-springの併用でエラー（Cannot update a component ForwardRef Modal ...）

参考記事は以下の通り。

- [ReactのsetStateでstateが即時反映されない件](https://jumbomonaca.hatenablog.com/entry/2019/05/15/115147)
- [RFClarification: why is "setState" asynchronous?](https://github.com/facebook/react/issues/11527#issuecomment-360199710)

## なにが問題か

下の例では、ブラウザとコンソールともに`1`と表示されることを期待しています。しかし、実際にコンポーネントをレンダリングすると、ブラウザに`1`、コンソールに`0`と表示されてしまいます。

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

```tsx
import { useEffect, useState } from 'react'

function Component() {
  const [count, setCount] = useState<number>(0)

  useEffect(() => {
    setCount(count + 1) // stateをインクリメント
    console.log(count) // 更新後のstateをコンソールに表示したい
  }, [])

  return <>{count}</>
}

export default Component
```

## 対処法

コードに以下の修正を加えることで、期待通りの動作を実現できます。

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

```tsx
import { useEffect, useState } from 'react'

function Component() {
  const [count, setCount] = useState<number>(0)

  useEffect(() => {
    setCount(count + 1) // stateをインクリメント
  }, [])

  useEffect(() => {
    console.log(count) // 更新後のstateをコンソールに表示したい
  }, [count])

  return <>{count}</>
}

export default Component
```

`useEffect`の第二引数にstateを指定することにより、stateの更新後に`console.log`を実行できるようになります。

「最初のコードでも、state更新後にログを表示していたのでは？」と思うかもしれません。

私は思いました。

## なぜこの問題が起こるのか

それは、Reactがstateの更新処理を**非同期**で行うからです。

Reactは、stateの変更を検知すると、そのstateに関連するコンポーネントを再レンダリングします。

この仕様において、同期的にstateを更新すると、stateの数に応じて大量のレンダリングが走ってしまいます。Reactではこれを抑制するために、stateの変更をある程度の単位にまとめ、一括でバッチ処理しています。

今回の例で言えば、`setCount`の段階ではまだstateが更新されていないということです。

## なぜ上記の対処法で解決するのか

`useEffect`内の処理は、コンポーネントの再レンダリング後に実行されるからです。

先ほど「`setCount`の段階では、stateは更新されない」と述べましたが、実際にstateが更新されるのは、**次に`useState`が呼ばれた時**です。`useState`が呼ばれるのは、stateの更新に伴ってコンポーネントが再レンダリングされた時。その後に`useEffect`内の処理を実行することで、更新後の値で`console.log`が実行できるのです。

Reactにおいて、stateの更新直後に値を参照すると、更新前の値を取得してしまうことがあります。本記事では、この問題の原因と対処法を説明しています。

React

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

react-springが本番環境でエラー（willAdvance is not a function ...）

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

Reactではstateの更新が即時反映されない場合がある