Jestjs 无法使用jest测试从节点\ U模块内部导入SCS的细长组件

我试图将Jest测试添加到一个使用纤细材质ui的项目中

我在GitHub上关注此问题，但无法使其正常工作：

以下是我所做的：

npx degit "sveltejs/template-webpack" smui-jest-testing
cd smui-jest-testing
yarn
yarn add svelte-material-ui
yarn add -D @testing-library/svelte
yarn add -D jest
yarn add -D svelte-jester
yarn add -D @testing-library/jest-dom
yarn add -D identity-obj-proxy
yarn add -D @babel/preset-env

我添加了一个组件

Hello.svelte

：

<script>
import { Button } from '@smui/button';
</script>

<Button>
Hi there.
</Button>

我的

jest.config.js

是这样的：

module.exports = {
  moduleFileExtensions: ['js', 'svelte'],
  moduleNameMapper: {
    '^utils(.*)$': '<rootDir>/src/utils$1',
    '\\.(css|less|scss)$': 'identity-obj-proxy',
  },
  transformIgnorePatterns: ['node_modules/(?!(@smui)/)'],
  testPathIgnorePatterns: ['/node_modules/', '/cypress/'],
  setupFilesAfterEnv: [
    // '<rootDir>/jest.setup.js',
    '@testing-library/jest-dom/extend-expect',
  ],
  transform: {
    // '^.+\\.tsx?$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
    '^.+\\.svelte$': ['svelte-jester', { preprocess: false }],
  },
  collectCoverageFrom: [
    '!./src/client.js',
    '!./src/server.js',
    '!./src/service-worker.js',
    './src/**/*.svelte',
    './src/**/*.ts',
    './src/**/*.js',
  ],
};

我有一个

.babelrc.json

，里面有：

{
  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
}

当我运行

纱线测试时

我看到：

$ yarn test
yarn run v1.19.1
warning package.json: No license field
$ jest src
 FAIL  src/__tests__/App.spec.js
  ● Test suite failed to run

    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:
     • 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/chrisdawson/Projects/.../javascript-overlay/smui-jest-testing/node_modules/@smui/button/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './_index.scss';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | <script>
      2 | 
    > 3 | import { Button } from '@smui/button';
        |                ^
      4 | </script>
      5 | 
      6 | <Button>

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1059:14)
      at Object.<anonymous> (src/Hello.svelte:3:16)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.941s
Ran all test suites matching /src/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

$纱线测试
纱线运行v1.19.1
warning package.json：无许可证字段
$jest src
src/__测试失败\u_/App.spec.js
● 测试套件无法运行
Jest遇到了意外的标记
这通常意味着您正试图导入Jest无法解析的文件，例如，它不是纯JavaScript。
默认情况下，如果Jest看到一个Babel配置，它将使用它来转换您的文件，忽略“node_modules”。
以下是您可以做的：
•要转换某些“节点模块”文件，可以在配置中指定自定义“transformIgnorePatterns”。
•如果需要自定义转换，请在配置中指定“转换”选项。
•如果您只是想模拟您的非JS模块（例如二进制资产），您可以使用“moduleNameMapper”配置选项将其剔除。
您将在文档中找到这些配置选项的更多详细信息和示例：
https://jestjs.io/docs/en/configuration.html
细节：
/home/chrisdawson/Projects/../javascript overlay/smui-jest-testing/node_modules/@smui/button/index.js:1
（{“Object.”：函数（模块，导出，require，uu dirname，uu filename，global，jest）{import./_index.scss'；
^^^^^^
SyntaxError:无法在模块外部使用导入语句
1 | 
2 | 
>3 |从'@smui/Button'导入{Button}；
|                ^
4 | 
5 | 
6 | 
在Runtime.createScriptFromCode（node_modules/jest Runtime/build/index.js:1059:14）
at对象。（src/Hello.svelte:3:16）
测试套件：1个失败，共1个
测试：共0项
快照：共0个
时间：0.941s
运行与/src/i匹配的所有测试套件。
错误命令失败，退出代码为1。
信息访问https://yarnpkg.com/en/docs/cli/run 有关此命令的文档。

---

这里有什么突出的地方吗？

我不懂笑话、巴贝尔等等。所以不要问我为什么，但你应该将你的

.babelrc.json

重命名为

Babel.config.js

，然后从这个文件导出你的配置：

module.exports={
预设：['@babel/preset env'，{targets:{node:'current'}}],，
}

您的错误消息看起来像SuUI中的文件，在NoDEYMasks中，没有被转储（因此，在IIFE的中间，以EXIFE的形式结束，即使在ES6中也是禁止的），因此我发现提供了一个解决方案。 接下来，

Button

是

@smui/Button

的默认导出，因此更改：

从'@smui/Button'导入{Button}；

致：

从“@smui/Button”导入按钮；

这个，我相信你自己会找到的

---

因此，在看到绿色标记之前的最后一个标记，我将留给您查找；）

我不懂笑话、巴贝尔等。所以不要问我为什么，但您应该将您的

.babelrc.json

重命名为

Babel.config.js

，并从此文件导出您的配置：

module.exports={
预设：['@babel/preset env'，{targets:{node:'current'}}],，
}

您的错误消息看起来像SuUI中的文件，在NoDEYMasks中，没有被转储（因此，在IIFE的中间，以EXIFE的形式结束，即使在ES6中也是禁止的），因此我发现提供了一个解决方案。 接下来，

Button

是

@smui/Button

的默认导出，因此更改：

从'@smui/Button'导入{Button}；

致：

从“@smui/Button”导入按钮；

这个，我相信你自己会找到的

---

因此，在看到绿色标记之前的最后一个问题，我将留给你去发现；）

我也有同样的问题。@rixo的答案对你有帮助吗？它对我仍然不起作用，即使使用babel.config.js。是的，他的答案解决了我的问题。如果你从我记录的设置开始，它会起作用。添加

moduleNameMapper:{'^.+\。（css | less | scss）$'：'babel jest'，}，

to jest.config.js是为mwI解决的问题。@rixo的答案对你有帮助吗？它对我仍然不起作用，即使使用babel.config.js。是的，他的答案确实解决了我的问题。如果你从我记录的设置开始，它会起作用。添加

moduleNameMapper:{'^.+\.（css | less | scss）$：'babel jest'，}，

是jest.config.js为mw修复的

{
  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
}

$ yarn test
yarn run v1.19.1
warning package.json: No license field
$ jest src
 FAIL  src/__tests__/App.spec.js
  ● Test suite failed to run

    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:
     • 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/chrisdawson/Projects/.../javascript-overlay/smui-jest-testing/node_modules/@smui/button/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './_index.scss';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | <script>
      2 | 
    > 3 | import { Button } from '@smui/button';
        |                ^
      4 | </script>
      5 | 
      6 | <Button>

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1059:14)
      at Object.<anonymous> (src/Hello.svelte:3:16)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.941s
Ran all test suites matching /src/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.