使用Svelte material ui对Svelte组件进行Jest单元测试会导致SyntaxError:无法在模块外

Question

我正在尝试使用Jest对我的Svelte组件进行单元测试。当这些组件导入@smui组件时(https://github.com/hperrin/svelte-material-ui)，运行Jest抛出错误：

SyntaxError: Cannot use import statement outside a module

导入其他节点模块或其他Svelte组件运行良好。运行节点v13.12.0。在node_modules中安装node-sas。

错误似乎是由node_modules/@smui/button中的index.js文件引起的，该文件包含像import './_index.scss';这样的导入和导出语句。

有什么想法吗？

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from '@rollup/plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import postcss from 'rollup-plugin-postcss';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\]@sapper[/\]/.test(warning.message)) || onwarn(warning);
const postcssOptions = () => ({
extensions: ['.scss', '.sass'],
extract: false,
minimize: true,
use: [
['sass', {
includePaths: [
'./src/theme',
'./node_modules',
]
}]
]
});
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: true
}),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
postcss(postcssOptions()),
legacy && babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/@babel/**'],
presets: [
['@babel/preset-env', {
targets: '> 0.25%, not dead'
}]
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-transform-runtime', {
useESModules: true
}]
]
}),
!dev && terser({
module: true
})
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
generate: 'ssr',
dev
}),
resolve({
dedupe: ['svelte']
}),
commonjs(),
postcss(postcssOptions())
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
),
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
commonjs(),
!dev && terser()
],
onwarn,
}
};

jest.config.js

module.exports = {
transform: {
"^.+\.svelte$": "jest-transform-svelte",
"^.+\.js$": "babel-jest",
},
moduleFileExtensions: ["js", "svelte"],
testPathIgnorePatterns: ["node_modules"],
bail: false,
verbose: true,
transformIgnorePatterns: ["node_modules"],
setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
};

babel.config.js

module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
node: "current",
},
},
],
],
};

/src/components/Button.svelte(待测试组件(

<script>
import Button from "@smui/button";
export let text;
</script>
<button>{text}</button>

/tests/button.spec.js

import { render, cleanup } from "@testing-library/svelte";
import Button from "../src/components/Button.svelte";
describe("button component", () => {
afterEach(() => {
cleanup();
}); // Default on import: runs it after each test.
test("should render component correctly", () => {
const test = "testing";
const { container } = render(Button, {
props: {
text: test,
},
});
expect(container).toContainHTML(`<button>${test}</button>`);
});
});

运行jest tests时出错

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './_index.scss';
                       ^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | <script type="module">
> 2 |   import Button from "@smui/button";
|                ^
3 |   export let text;
4 | </script>
5 | 
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1085:14)
at Object.<anonymous> (src/components/Button.svelte:2:16)

回购：https://github.com/darryl-snow/sapper-test

Answer 1

我将其添加到jest.config.js中以修复它：

"moduleNameMapper": {
"^.+\.(css|less|scss)$": "babel-jest"
}