コンパイラかく語りき

import { Fun } from 'programming'

トップ > React.js > AntDesign のバージョンアップデートにより、css-dev-only-do-not-override に差分が発生してしまう問題への対処法

AntDesign のバージョンアップデートにより、css-dev-only-do-not-override に差分が発生してしまう問題への対処法

React.js AntDesign

React のコンポーネントライブラリである AntDesign の話。

AntDesign を利用したコンポーネントに対するスナップショットテストが落ちていた。スナップショットの変更箇所は以下のような感じ。

<!-- before -->
<div class="ant-select _select_1826e5 css-dev-only-do-not-override-w8mnev ant-select-single ant-select-show-arrow">

<!-- after -->
<div class="ant-select _select_1826e5 css-dev-only-do-not-override-1jr9qlj ant-select-single ant-select-show-arrow">

css-dev-only-do-not-override-... というクラス名が変わっている。調べてみると、 AntDesign をアップデートしたことによる影響だった。

AntDesignのレポジトリにて、以下のイシューを発見。

github.com

そもそも、 css-dev-only-do-not-override-... はマイクロフロントエンドなどの戦略を取っているサービスに必要なもの。複数の異なるバージョンの AntDesign が混ざっている場合の、識別子のようなもの。

以下のように、 AntDesign の ConfigProvider を利用すれば OK。

 <ConfigProvider theme={{ hashed: false }}> ..<your app here>.. </ConfigProvider>

あるいは、setupファイルで設定してもOK。以下は vitest の例。

vi.mock('antd', async () => {
  const antd = await vi.importActual('antd');
  // @ts-expect-error importActualの型付けをしていない
  antd.theme.defaultConfig.hashed = false;
  return antd;
});