私のアプリでは、React と TypeScript を使用しています。jest テストを実行しようとすると、次のエラーが発生します。
C:\Users\e-KDKK\workspace\konrad\mikskarpety\src\images\icons\Sock.svg:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" width="18.725" height="23.947" viewBox="0 0 18.725 23.947"> ^ SyntaxError: Unexpected token < 1 | import React, { FC } from 'react'; 2 | > 3 | import SockIcon from '../../images/icons/Sock.svg'; | ^ 4 | 5 | export const Spinner: FC = () => { 6 | return ( at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17) at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25) at Object.<anonymous> (src/components/Spinner/Spinner.tsx:3:1)
このファイルはテストすらされていません。なぜコンパイルしようとするのか分かりません。私のjest.config.jsonファイルにはカバレッジしきい値のみが含まれています。
jestはSVGのような特定のファイルに対して追加の変換セクションが必要になることがあると読んだのですが、設定に追加したときに
"transform": {
"^.+\\.svg$": "jest-svg-transformer"
},
エラーメッセージは次のように変更されました:
C:\Users\e-KDKK\workspace\konrad\mikskarpety\test\utils\debounce.test.ts:1 ({"オブジェクト。":function(module,exports,require,__dirname,__filename,global,jest){import { getVersion } from 'jest'; ^
SyntaxError: Unexpected token { at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17) at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
それは私にとってさらに混乱を招きます。
アプリのコードはここにあります:https://github.com/KonradKlimczak/mikskarpety
ベストアンサー1
jestはjs/jsx以外のファイル拡張子を読み込む方法を知らないので、js の構文svg ファイル用のトランスフォーマーを追加します。
"transform": {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.svg$": "<rootDir>/svgTransform.js"
},
ファイルを作成しますsvgTransform.js（見るカスタムトランスフォーマー) をルート ディレクトリに次の内容で追加します。
// See https://stackoverflow.com/questions/58603201/jest-cannot-load-svg-file
module.exports = {
process() {
return {
code: `module.exports = {};`,
};
},
getCacheKey() {
// The output is always the same.
return "svgTransform";
},
};