React + vite + vitest(+ Happy DOM)のフロントエンドプロジェクトに初挑戦、SVGの参照にReactコンポーネントとしてのインポートを可能にするvite用プラグインvite-plugin-svgr(実体はSVGR)を利用したところ、vitest実行で次の警告が報告されました。
Warning: </assets/icons/App.svg?react /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
実害はありませんがノイズではあるので、解消を試みて次で解決できました。
- ユニットテスト実行時の置き換え用ダミーコンポーネント定義を任意の場所(jestのマナーに従うなら
src/__mock__/あたり)に保存します
const Dummy = () => <span />
export default Dummy
- SVGの参照をダミーコンポーネントに置き換えるエイリアスをvitestの設定で定義します
test: {
alias: [
{
find: /.*\.svg/,
replacement: path.resolve(__dirname, './src/__mock__/svg.tsx'),
},
],
},
モジュール解決まわりの設定はjestとvitestで大きく異なり、vitestに関する情報はWeb上にあまり見あたらなかったのでメモしておく次第です。参考になりましたら幸いです。
私が参考したWebページは次になります。
- Jest - SVGR
- Configuring Vitest | Vitest(
aliasオプションの項)