TypeError:使用Svelte和jest时，Select不是构造函数

Question

在为Svelte组件编写Jest测试时，当组件使用es6导入语法导入库时，我得到了一个TypeError: Select is not a constructor错误。

TestSelect.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配置选项。提前感谢

Answer 1

所以Jest的主要问题是，在默认情况下，它会忽略node_folder中的所有文件。因此，当Jest在您的代码中看到导入的Svelte库时，它不会在运行测试之前编译它们，这会导致错误。

一种解决方案是告诉jest不要忽略svelte-select库，方法是在jest配置中添加以下内容：

  transformIgnorePatterns: [
    'node_modules/(?!(svelte-select)/)' /* ignore node_module but not node_modules/svelte-select/* */
  ],

库本身的另一个问题是，默认导出的元素不是Svelte组件，而是您看到的here中预编译的简单.js文件。jest无法理解此文件，因此会导致您的错误：

TypeError: Select不是构造函数

该库导出Select.js文件中的Svelte组件。您的应用程序和jest可以有效地理解这一点。

因此，要解决您的问题，应使用以下命令导入此组件：

import Select from 'svelte-select/Select';

这样，jest就会理解它导入了一个.svelte文件，并且应该使用svelte-jester转换器对其进行编译。

理想情况下，您可以要求库的作者在缺省情况下使用package.json导出Svelte组件

 "main": "Select.js",

我已经创建了一个存储库来向您展示工作配置：https://github.com/johannchopin/test-svelte-component-in-node_module。

Answer 2

通过使用rollup首先捆绑我的测试，然后在捆绑的输出上运行jest，我能够解决这个问题。类似的方法在this blog post中也有描述。

Answer 3

我修复了这个问题。我正在为我的svelte应用程序使用Typescript。

// TestSelect.js:
import Select from 'svelte-select/Select';

Jest配置文件

  "jest": {
    "resetMocks": false,
    "transform": {
      "^.+\\.svelte$": [
        "svelte-jester",
        {
          "preprocess": true
        }
      ],
      "^.+\\.ts$": "ts-jest",
      "^.+\\.js$": "babel-jest"
    },
    "moduleFileExtensions": [
      "js",
      "ts",
      "svelte"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(svelte-select))"
    ],
    "testPathIgnorePatterns": [
      "cypress"
    ],
    "moduleNameMapper": {
      ".css": "<rootDir>/empty-module.js",
      "intl-tel-input": "<rootDir>/user-intl-module.js"
    }
  }