TypeError：无法解析模块说明符“@open-wc/testing”。相对引用必须以“/”、“./”或“../”开头答案

【问题标题】：TypeError: Failed to resolve module specifier "@open-wc/testing". Relative references must start with either "/", "./", or "../"TypeError：无法解析模块说明符“@open-wc/testing”。相对引用必须以“/”、“./”或“../”开头
【发布时间】：2019-07-16 22:12:07
【问题描述】：

我正在尝试找到一些好的方法来对我的 vanilla webcomponents 进行单元测试，我正在尝试这种方法open-wc，但我收到了上面提到的错误

我的组件测试.js

import {
  html,
  fixture,
  expect,
} from '@open-wc/testing';
import { MyComponent } from "../src/my-component.js";

describe("simple test", () => {
  it("test", async () => {
    const el = await fixture("<my-component></my-component>");
    expect(el.success).to.be.false;
  });
});

package.json 中的相关部分

  "scripts": {
    "test": "karma start",
...
  },
  "devDependencies": {
    "@open-wc/testing": "^1.0.14",
    "@webcomponents/webcomponentsjs": "^2.2.0",
    "babel-eslint": "^10.0.2",
    "es-dev-server": "^1.6.3",
    "eslint": "^6.0.1",
    "eslint-config-google": "^0.13.0",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-jasmine": "^2.0.1",
    "karma-script-launcher": "^1.0.0",
    "karma-spec-reporter": "0.0.32",
    "prettier": "1.18.2",
    "wct-browser-legacy": "^1.0.2",
    "web-component-tester": "^6.9.2"
  },

控制台

# npm test 



> basic-vanilla-webcomponent@ test C:\_d\WSs\basic-vanilla-webcomponent                                                                       
> karma start                                                                                                                                 

16 07 2019 18:57:51.712:INFO [karma-server]: Karma v4.2.0 server started at http://0.0.0.0:9876/                                              
16 07 2019 18:57:51.719:INFO [launcher]: Launching browsers Chrome with concurrency unlimited                                                 
16 07 2019 18:57:51.730:INFO [launcher]: Starting browser Chrome                                                                              
16 07 2019 18:57:54.850:INFO [Chrome 75.0.3770 (Windows 10.0.0)]: Connected on socket Hf1IzCLlm_IaBeZXAAAA with id 12297274                   
Chrome 75.0.3770 (Windows 10.0.0) ERROR                                                                                                       
  An error was thrown in afterAll                                                                                                             
  ReferenceError: require is not defined                                                                                                      
      at node_modules/find-port/test/findPort.test.js:1:16                                                                                    
  ReferenceError: require is not defined                                                                                                      
      at node_modules/registry-auth-token/test/auth-token.test.js:1:10                                                                        
  ReferenceError: require is not defined                                                                                                      
      at node_modules/registry-auth-token/test/registry-url.test.js:1:10                                                                      
  ReferenceError: require is not defined                                                                                                      
      at node_modules/winston/test/transports/00-file-stress.test.js:11:12                                                                    
  ReferenceError: require is not defined                                                                                                      
      at node_modules/winston/test/transports/01-file-maxsize.test.js:8:16                                                                    
  ReferenceError: require is not defined                                                                                                      
      at node_modules/winston/test/transports/console.test.js:11:14                                                                           
  ReferenceError: require is not defined                                                                                                      
      at node_modules/winston/test/transports/file-archive.test.js:10:16                                                                      
  ReferenceError: require is not defined                                                                                                      
      at node_modules/winston/test/transports/file-tailrolling.test.js:2:16                                                                   
  ReferenceError: require is not defined                                                                                                      
      at node_modules/winston/test/transports/file.test.js:3:14                                                                               
  ReferenceError: require is not defined                                                                                                      
      at node_modules/winston/test/transports/http.test.js:7:12                                                                               
  ReferenceError: require is not defined                                                                                                      
      at node_modules/winston/test/transports/stream.test.js:3:14                                                                             
  TypeError: Failed to resolve module specifier "@open-wc/testing". Relative references must start with either "/", "./", or "../".           

Chrome 75.0.3770 (Windows 10.0.0): Executed 0 of 0 ERROR (0.02 secs / 0 secs)                                                                 

npm ERR! Test failed.  See above for more details.

版本检查

# npm list @open-wc/testing
basic-vanilla-webcomponent@ C:\_d\WSs\basic-vanilla-webcomponent
`-- @open-wc/testing@1.0.14

*** 2019 年 7 月 22 日编辑

我通过将整个写入路径来更改导入（import { html, fixture, expect } from "C:/_d/WSs/basic-vanilla-webcomponent/node_modules/@open-wc/testing";）然后我得到了这个没有多大帮助的错误：

【问题讨论】：

标签： npm karma-jasmine web-component

【解决方案1】：

我遇到了同样的问题，但是在 src 文件夹中指向 tests 可以正常工作。比如

这给出了和你一样的错误

{
   pattern: 'test/**/*.test.js',
   type: 'module'
}

但这很好用

{
   pattern: 'src/**/*.test.js',
   type: 'module'
}

【讨论】：

这是否意味着我需要将我的 *.test.js 文件从 test/ 移动到 src/ 中？

【解决方案2】：

如果@open-wc 在主公用文件夹中，您应该尝试添加./：

import {
  html,
  fixture,
  expect,
} from './@open-wc/testing';

【讨论】：

很抱歉，它并没有修复或显着改变任何东西。刚刚添加了一个警告 404。也许“./”更糟。以下是输出：... 17 07 2019 13:17:06.282:INFO [Chrome 75.0.3770 (Windows 10.0.0)]: 连接在套接字 IH7KBqJyxWHJugO3AAAA 上，ID 为 93745076 17 07 2019 13:17:06.779:WARN [web -server]: 404: /base/test/@open-wc/testing Chrome 75.0.3770 (Windows 10.0.0) ERROR 在 afterAll ReferenceError 中抛出一个错误：require is not defined
@JimC 这不是更糟，而是更好：它说在该路径中找不到该文件。您应该设置绝对路径或正确的相对路径（我们无法为您猜测）
我尝试了相对路径（'../node_modules/@open-wc/testing'），但它导致了同样的错误。您可以在github.com/jimisdrpc/basic-vanilla-webcomponent/blob/master/… 中查看整个代码。有趣的是，在 Visual Studio Code 中，它找到了文件夹 @open-wc/testing，但是当我通过 npm test 运行测试时它被遗漏了。
为什么是“../”而不是“./”？什么是相对路径？
我尝试了所有可能，但没有成功。如果你 git clone 我的项目，你会看到相对路径。顺便说一句，此刻，如果我缺少一些额外的配置 karma.conf.js 以便在我的测试期间使 @open-wc/testing 可用，我会感到很奇怪。请您看看我在github.com/jimisdrpc/basic-vanilla-webcomponent/blob/master/… 中的 karma.conf.js，看看我是否遗漏了一些额外的配置，以便在测试期间使此类库可用？

【解决方案3】：

我也遇到过类似的问题，不过我的解决方法是在karma.conf.js中添加如下代码：

esm: {
  nodeResolve: true,
},

【讨论】：