关于vue3:vue3配置jest测试环境踩坑

根本配置网上都有，这里不再详述，说一下踩过的坑

1. 目前 jest 只能用 26+ 的版本，不能用最新的 27+，我一开始间接用的 npm install jest --save-dev 装置，各种配置配好后运行报了一个莫名其妙的谬误 Cannot destructure property 'config' of 'undefined'，查看源码发现是vue-jest 中getCacheKey的第 4 个参数解构失败报错，再搜寻了一下发现是 jest 调用 vue-jest 的getCacheKey办法的时候只传了 3 个参数，由此判断是 jest 版本有问题，再看了一下 element-plus 的配置发现用的是 jest26 版本，豁然开朗，马上换 26 版本运行，发现还是报错不过是另一个谬误了。钻研了下，应该是jest 配套的包的版本问题，于是全副换成 26+ 运行，胜利。上面是我胜利运行的的 package.json 中jest相干的包配置：

    "@types/jest": "^26.0.23",
    "babel-jest": "^26.3.0",
    "jest": "^26.6.3",
    "ts-jest": "^26.0.0",

2. 运行胜利后，我本人写的一个 dialog 组件测试用例执行失败，谬误：Cannot call text on an empty DOMWrapper，具体代码：

   const TESTSTR = 'risk everywhere risk everywhere risk everywhere';
   describe('Dialog vue',() => {test('dialog should have content when content has been given', async () => {
    const wrapper = mount(Dialog,{
      props:{
        content: TESTSTR,
        modelValue: true
      }
    });
    await nextTick();
    expect(wrapper.find('.modal-body').text()).toEqual(TESTSTR);
     });
   });

   其它组件测试没报错，就这个 dialog 组件报错，通过了一番思考终于找到起因：

   <template>
    <teleport to="body">
    </teleport>
   </template>

   teleport 的问题，元素都搬走了，DOMWrapper 必定变成 empty 了，应该要加一个配置属性能让 teleport 生效

   <template>
    <teleport to="body" :disabled="!appendToBody">
    </teleport>
   </template>

   OK，功败垂成