javascript - 类型错误 : Select is not a constructor when using Svelte and jest

标签 javascript jestjs svelte testing-library

在为 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/

相关文章:

javascript - Chrome 开发工具 : Drop into debugger without switching to Sources tab

javascript - 如何使 Resig 的微模板与 XHTML 兼容?

javascript - 在选定的选项卡上加载内容(基础)

svelte - 如何防止过渡延迟页面加载?

javascript - 传递 :click event into dynamically created <svelte:component/>

javascript - 当 firebase.auth().currentUser.getIdToken() 抛出 "auth/user-token-expired"时该怎么办?

node.js - 使用 chai-http 和 Jest 进行测试时,如何从 api 返回响应

reactjs - setupTests.js 未在 CRA React 应用程序中自动加载

node.js - 如何在测试套件中仅模拟一次函数?

javascript - SvelteKit 维护模式