vue3配置jest测试环境踩坑

柱子Gor

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

  1. 目前jest只能用26+的版本,不能用最新的27+,我一开始直接用的npm install jest --save-dev安装,各种配置配好后运行报了一个莫名其妙的错误Cannot destructure property 'config' of 'undefined',查看源码发现是vue-jestgetCacheKey的第4个参数解构失败报错,再搜索了一下发现是jest调用vue-jestgetCacheKey方法的时候只传了3个参数,由此判断是jest版本有问题,再看了一下element-plus的配置发现用的是jest26版本,恍然大悟,马上换26版本运行,发现还是报错不过是另一个错误了。研究了下,应该是jest配套的包的版本问题,于是全部换成26+运行,成功。下面是我成功运行的的package.jsonjest相关的包配置:

     "@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,大功告成

阅读 841
11 声望
0 粉丝
0 条评论
你知道吗?

11 声望
0 粉丝
宣传栏