TypeError: Select не является конструктором при использовании Svelte и jest

Question

При написании теста Jest для компонента Svelte я получаю TypeError: Select is not a constructor ошибка, когда компонент импортирует библиотеку с использованием синтаксиса импорта es6.

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
  }

Мне интересно, есть ли вариант конфигурации шутки, который я пропустил. заранее спасибо

Answer 1

Итак, основная проблема Jest заключается в том, что по умолчанию он игнорирует все файлы в node_folder. Поэтому, когда Jest видит импортированные библиотеки Svelte в вашем коде, он не компилирует их перед запуском теста, что вызывает ошибки.

Решением было бы пошутить, чтобы не игнорировать svelte-select библиотеку, добавив это в конфигурацию jest:

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

Еще одна проблема с самой библиотекой заключается в том, что экспортируемый элемент по умолчанию - это не компонент Svelte, а предварительно скомпилированный простой .jsфайл, как вы видите здесь. Этот файл не понимают шуткой и вызывают вашу ошибку:

TypeError: Select не является конструктором

Библиотека экспортирует компонент Svelte в файл Select.js. Это действительно для понимания вашим приложением и шуткой.

Итак, чтобы решить вашу проблему, вы должны импортировать этот компонент, используя:

import Select from 'svelte-select/Select';

Таким образом, шут поймет, что он импортирует .svelte файл и должен скомпилировать его с помощью svelte-jester трансформатор.

В идеале вы можете попросить автора библиотеки экспортировать по умолчанию компонент Svelte, используя в package.json:

 "main": "Select.js",

Я создал репо, чтобы показать вам рабочую конфигурацию: https://github.com/johannchopin/test-svelte-component-in-node_module.

Answer 2

Мне удалось обойти эту проблему, использовав накопительный пакет для сначала объединения моих тестов, а затем запуска jest для объединенного вывода. Похожий способ описан в этом сообщении в блоге.

Answer 3

Я исправил эту проблему. Я использую 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"
    }
  }