Jest 不会在 NextJS 应用程序中解析 SVG 图片

Posted 2023-03-13

【中文标题】Jest 不会在 NextJS 应用程序中解析 SVG 图片

【英文标题】：Jest won't parse SVG pictures in NextJS application

【发布时间】：2021-11-28 14:32:10

【问题描述】：

当我运行 yarn test 时，我收到以下消息：

 Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain javascript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/home/marouane/projects/manage-landing-page/jest.setup.ts:1
("Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)import "@testing-library/jest-dom/extend-expect";
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

我在网上看了下，发现必须要安装jest-svg-transformer，我照做了。

我还在jest.config.js 文件中添加了所需的行：

module.exports = 
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  transform: 
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.svg$': 'jest-svg-transformer',
  ,

;

它仍然不起作用。我尝试了网络上的所有其他解决方案，但无济于事。

任何帮助将不胜感激！谢谢！

编辑：

显然，我应该在jest.config.js 文件中输入tsx 而不是jsx，仅此而已...愚蠢的错误，我知道...哦，好吧！！！

【参考方案1】：

我遇到了这个问题。我认为你应该内联你的文件。在jest.config 中，我检查.svg 并将其替换为内联字符串。

// jest.config.js
module.export = 
  transform: 
    '^.+\\.[tj]sx?$': 'babel-jest',
    '^.+\\.svg$': '<rootDir>/svgTransformer.js',
  

// svgTransformer.js
module.exports = 
  process(src, filename) 
    const assetFilename = JSON.stringify(path.basename(filename));

    if (filename.match(/\.svg$/)) 
      // Based on how SVGR generates a component name:
      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
      const pascalCaseFilename = pascalCase(path.parse(filename).name);
      const componentName = `Svg$pascalCaseFilename`;
      return `const React = require('react');
      module.exports = 
        __esModule: true,
        default: $assetFilename,
        ReactComponent: React.forwardRef(function $componentName(props, ref) 
          return 
            $$typeof: Symbol.for('react.element'),
            type: 'svg',
            ref: ref,
            key: null,
            props: Object.assign(, props, 
              children: $assetFilename
            )
          ;
        ),
      ;`;
    

    return `module.exports = $assetFilename;`;
  ,
;

// pascal-case.ts
import  camelCase, toUpper  from 'lodash';

export const pascalCase = (str: string) => camelCase(str).replace(/^(.)/, toUpper);

如果您有任何问题，请告诉我。

【讨论】：

感谢您的帮助。即使这不是解决方案（我找到了它，而且它来自我的一个非常愚蠢的错误，没有任何借口）。

这对我不起作用，你有这个的 github 吗？谢谢