vue3.0单文件组件单元测试试水

发表于:2021-8-24 09:41  作者:CoderQueen   来源:掘金

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: 测试技术 单元测试

  初始化一个项目
  1.创建一个文件夹,用npm init -y初始化一个项目。
  2.创建一个简易的项目结构,如下图所示:
  环境准备
  一、安装依赖
  方式一:
  1.在package.json中键入如下内容
  2. npm install统一安装
  方式二:使用命令依次安装,下面只展示部分安装依赖步骤
  // 单元测试所需依赖
  npm install jest@26.6.3 babel-jest@26.6.3 @vue/test-utils@next vue-jest@next -D
  安装babel桥接
  npm install babel-core@bridge -D
  二、设置配置文件
  babel.config.js
  module.exports = {
      presets: ['@babel/preset-env']
  }
  jest.config.js
  module.exports = {
      "testMatch": ["**/__tests__/**/*.[jt]s?(x)"],
      "transform": {
          ".*\\.vue$": "vue-jest", // *.vue文件用vue-jest处理
          ".*\\.js$": "babel-jest" // *.js文件用babel-jest处理
      },
      "moduleFileExtensions": [ // 告诉jest要处理哪些格式的文件
          "js",
          "vue"
      ]
  }
  给package.json增加一个test脚本
  scripts: {
      "test": "jest"
  }
  三、编写vue单文件组件样例
  // Jest.vue
  <template>
    <div?class=''>
      <p>{{counter}}</p>
      <button?@click="add">累加</button>
    </div>
  </template>
  <script>
  import?{?ref?}?from?'vue';
  export?default?{
    name:?"Jest",
    setup(){
      let?counter?=?ref(0);
      function?add()?{
        counter.value++;
      }
       return?{
        counter,
        add
      }
    }
  }
  </script>
  四、编写单元测试用例
  // jest.test.js
  import?'regenerator-runtime/runtime' // 解决ReferenceError: regeneratorRuntime is not defined问题
  import?Jest?from?'../src/Jest.vue';
  import?{?shallowMount?}?from?'@vue/test-utils';
  describe("test?jest",()?=>?{
    test('trigger',async?()?=>?{
      const?wrapper?=?shallowMount(Jest);
      await?wrapper.find("button").trigger("click");
      expect(wrapper.find("p").text()).toBe("1");
      await?wrapper.find("button").trigger("click");
      expect(wrapper.find("p").text()).toBe("2");
    })
  })
  运行测试用例
  npm test
  结果如下,即为成功。
  运行测试用例遇到的问题
  1.各个依赖包版本不一致导致的测试用例不能执行
  2.ReferenceError: regeneratorRuntime is not defined
  解决办法
  1.保存jest、vue-jest、babel-jest版本一致
  2.安装regenerator-runtime依赖,npm install regenerator-runtime -D,并在测试用例文件中导入依赖import?'regenerator-runtime/runtime'

      本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理

评 论

论坛新帖



建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海信义律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2022, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道