Блог

Я пытаюсь создать пустой проект, похожий на шаблон, используя lit-html. Я хотел также добавить некоторые возможности тестирования, поэтому я пытался заставить его работать с Karma.

Я могу запустить обычный тест, например, дополнение, без каких-либо ошибок, поэтому я думаю, что сама Karma работает нормально. но я не могу запустить какой-либо тест с участием веб-компонента. Я не могу импортировать веб-компонент!

я экспортирую веб-компонент с: export default class MyComponent ...

и затем в тестовом файле я импортирую его с: import MyComponent from 'pathToComponent/MyComponent'

Когда я запускаю тест, я получаю:

 Error loading test file: /test/example.test.js
TypeError: Failed to fetch dynamically imported module: http://localhost:9876/base/test/example.test.js
  

Он есть у меня в репозитории github здесь:https://github.com/boguz/rollup-lit-redux , так что вы можете взглянуть получше, если вам нужно посмотреть, какие другие пакеты я установил.

Любая помощь очень ценится. Спасибо!

Сообщение об ошибке связано с модулем, на который ссылается /test/example.test.js — сообщение об ошибке немного обманчиво…

Не удалось получить динамически импортированный модуль

Ключ в том, что вы не динамически импортировали (это когда вы используете const module = await import('path') , и вы получите исключение в этой строке, если произойдет сбой) — вы импортировали статически. Это сообщение об ошибке не потому, что оно не смогло найти http://localhost:9876/base/test/example.test.js , а потому, что оно не смогло найти вложенную ссылку в этом файле.

По предположению, example.test.js содержит import с относительным путем, который не обслуживается:

 import * as testFramework from './testFramework';

export default class MyComponent...
  

Это работает в инструментах TypeScript и linting, потому что он может разрешать поиск ./testFramework в ./testFramework.d.ts , ./node_modules/@types/testFramework.d.ts или любой другой тип, который вы используете.

Однако в браузере он не знает, что вы на самом деле хотите, ./testFramework.js или ./testFramework/index.js запрашивает ./testFramework напрямую, получает 404, а затем выдает вам эту ошибку для вызывающего компонента.

Короче говоря:

• Если вы статически импортируете (т. Е. С import * from ... )
• Но вы получаете

Не удалось получить динамически импортированный модуль: filename.js

• На самом деле ошибка связана с другим статическим import входом filename.js , а не с получением filename.js самого себя.

Вкладка сеть укажет вам, в какой зависимости заключается проблема, поскольку это будет 404, и исправление заключается в том, чтобы либо разрешить этот импорт с помощью ваших инструментов сборки, либо указать полный относительный путь к файлу .js в вашем исходном коде.