vue3配置jest测试环境踩坑

Posted 2021-09-07 柱子Gor

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

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，大功告成