在为 Svelte 组件编写 Jest 测试时,我得到一个 TypeError: Select is not a constructor
组件使用 es6 导入语法导入库时出错。
测试选择.js:
<script>
import Select from 'svelte-select';
let items = [
{value: 'chocolate', label: 'Chocolate'},
{value: 'pizza', label: 'Pizza'},
{value: 'cake', label: 'Cake'},
{value: 'chips', label: 'Chips'},
{value: 'ice-cream', label: 'Ice Cream'},
];
let selectedValue = undefined;
</script>
<Select {items} bind:selectedValue></Select>
TestSelect.spec.js:
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/svelte';
import TestSelect from './TestSelect.svelte';
describe('Component', () => {
test('Should render', () => {
const { container } = render(TestSelect, {});
expect(true);
});
});
Jest 配置
"jest": {
"collectCoverage": true,
"testResultsProcessor": "jest-sonar-reporter",
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.svelte$": "svelte-jester"
},
"moduleFileExtensions": [
"js",
"svelte"
],
"setupFilesAfterEnv": [
"@testing-library/jest-dom/extend-expect"
],
"verbose": true
}
我想知道是否有一个我错过的开 Jest 配置选项。提前致谢
最佳答案
所以 Jest 的主要问题是,默认情况下它会忽略 node_folder
中的所有文件。 .因此,当 Jest 在您的代码中看到导入的 Svelte 库时,它不会在运行导致错误的测试之前编译它们。
一个解决方案是告诉 jest 不要忽略 svelte-select
通过在 Jest 配置中添加这个库:
transformIgnorePatterns: [
'node_modules/(?!(svelte-select)/)' /* ignore node_module but not node_modules/svelte-select/* */
],
库本身的另一个问题是,默认导出的元素不是 Svelte 组件,而是预编译的简单 .js
文件如您所见 here .开 Jest 不理解此文件并导致您的错误:TypeError: Select is not a constructor
库导出 Select.js 中的 Svelte 组件文件。这对于您的应用程序和 Jest 是有效的。
因此,要解决您的问题,您应该使用以下方法导入此组件:
import Select from 'svelte-select/Select';
像这样,jest 会明白它导入了 .svelte
文件并且应该使用 svelte-jester
编译它变压器。理想情况下,您可以要求库的作者在
package.json
中默认导出 Svelte 组件。 : "main": "Select.js",
我创建了一个 repo 来向您展示工作配置:https://github.com/johannchopin/test-svelte-component-in-node_module .
关于javascript - 类型错误 : Select is not a constructor when using Svelte and jest,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63504725/