ReferenceError: ShadowRoot 未定义 Jest 和 Vue3

Posted 2023-02-22

【中文标题】ReferenceError: ShadowRoot 未定义 Jest 和 Vue3

【英文标题】：ReferenceError: ShadowRoot is not defined Jest and Vue3

【发布时间】：2021-05-19 09:55:09

【问题描述】：

我正在使用 Jest 设置 Vue3 和单元测试。

我已经不得不努力让它发挥作用，并且我已经尝试了很多不同的配置。

这是我最后一个“工作”配置，因此我收到此错误：

ReferenceError: ShadowRoot is not defined

其实我没有更多的想法。

我的配置：

jest.config.js

    module.exports = 
        transform: 
            "^.+\\.vue$": "vue-jest",
            "^.+\\.js$": "babel-jest",
            '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)(\\?inline)?$': 'jest-transform-stub',
        ,
        moduleFileExtensions: ['vue', 'js', 'json', 'node'],
        transformIgnorePatterns: [
            "node_modules/(?!@jamescoyle/vue-icon)"
        ],
        moduleNameMapper: 
            "@/(.*)$": "<rootDir>/src/$1"
        
    

header.test.js

    import  mount  from '@vue/test-utils'
    import Header from "./Header.vue";
    
    test('Header', () => 
        const wrapper = mount(Header)
        console.log(wrapper.html())
    )

完整的错误：

    > vue-cli-service test:unit
    
     FAIL  src/views/components/layout/Header/Header.test.js
      ✕ Header (11ms)
    
      ● Header
    
        ReferenceError: ShadowRoot is not defined
    
          3 |
          4 | test('Header', () => 
        > 5 |     const wrapper = mount(Header)
            |                     ^
          6 |     
          7 |     console.log(wrapper.html())
          8 | )
    
          at normalizeContainer (node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1260:30)
          at Object.app.mount (node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1211:27)
          at mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:2288:18)
          at Object.<anonymous> (src/views/components/layout/Header/Header.test.js:5:21)
    
    Test Suites: 1 failed, 1 total
    Tests:       1 failed, 1 total
    Snapshots:   0 total
    Time:        1.664s
    Ran all test suites.

【问题讨论】：

有任何解决方案吗？

目前还没有解决办法

【参考方案1】：

看起来 Vue 团队已经意识到了这一点，并且已经合并了一个代码修复。

参考文献

https://github.com/vuejs/vue-test-utils-next/issues/293

https://github.com/vuejs/vue-next/pull/2943

Vue 3.0.6 发布时应该可以解决这个问题。

【参考方案2】：

看起来将Vue 版本降级到3.0.2 和vue-test-utils 版本降级到2.0.0-beta.10 可以解决问题。也许最新版本有问题，应该提出一个错误。