TypeError:使用Svelte和Jest时Select不是构造函数 [英] TypeError: Select is not a constructor when using Svelte and jest

问题描述

在为Svelte组件编写Jest测试时，当该组件使用es6 import语法导入库时，出现TypeError: Select is not a constructor错误.

When writing a Jest test for a Svelte component I am getting a TypeError: Select is not a constructor error when the component imports a library using the es6 import syntax.

TestSelect.js:

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:

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": {
    "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
  }

我想知道我是否错过了一个开玩笑的配置选项.预先感谢

I'm wondering if there is a jest config option that I have missed. Thanks in advance

推荐答案

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

So the main problem with Jest, is that by default it ignore all files in the node_folder. So when Jest see imported Svelte libraries in your code it doesn't compile them before running the test which cause errors.

一种解决方案是通过在jest配置中添加svelte-select库来告诉jest不要忽略svelte-select库:

An solution would be to tell jest to not ignore the svelte-select library by adding this in the jest config:

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

库本身的另一个问题是，默认导出的元素不是Svelte组件，而是预编译的简单.js文件，如您所见

Another issue with the library itself, is that the default exported element is not a Svelte component but a precompiled simple .js file as you see here. This file is not understand by jest and cause your error:

TypeError:Select不是构造函数

TypeError: Select is not a constructor

库在 Select.js中导出Svelte组件. 文件.可以被您的应用程序和玩笑所理解.

The library export the Svelte component in the Select.js file. This one is valid to be understand by your application and jest.

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

So to fix your issue, you should import this component using:

import Select from 'svelte-select/Select';

像这样，开玩笑会理解它会导入.svelte文件，并应使用svelte-jester转换器对其进行编译.

Like that, jest will understand that it imports a .svelte file and should compile it using the svelte-jester transformer.

理想情况下，您可以要求库的作者默认使用package.json中的Svelte组件导出:

Ideally you can ask the author of the library to export by default the Svelte component using in package.json:

 "main": "Select.js",

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

I've created a repo to show you the working configuration: https://github.com/johannchopin/test-svelte-component-in-node_module.

这篇关于TypeError:使用Svelte和Jest时Select不是构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！