如何在Nuxt中进行Jest单元测试的配置

1. package.son:

"jest": {

"moduleNameMapper": {

"^@/(.*)$":"/$1",

"^~/(.*)$":"/$1",

"^vue$":"vue/dist/vue.common.js"

    },

"moduleFileExtensions": [

"js",

"vue",

"json"

    ],

"transform": {

"^.+\\.js$":"babel-jest",

".*\\.(vue)$":"vue-jest"

    },

"collectCoverage":true,

"collectCoverageFrom": [

"/components/**/*.vue",

"/pages/**/*.vue"

    ]

  } 

同时还要在scripts里面添加 "unit": "jest"

"scripts": {

"dev":"nuxt","dev":"nuxt",

"build":"nuxt build","build":"nuxt build",

"start":"nuxt start","start":"nuxt start",

"generate":"nuxt generate""generate":"nuxt generate",

"unit":"jest"

  },  

2. 新建一个.babelrc文件：

{

  "env": {

    "test": {

      "presets": [

        [

          "@babel/preset-env",

          {

            "targets": {

              "node": "current"

            }

          }

        ]

      ]

    }

  }

}

我们还可以安装一下test-utils测试工具包，这样更加方便使用： 

npm install --save-dev @vue/test-utils

这里我写了一个测试脚本Cart.spec.js：

import {mount} from"@vue/test-utils";

import Cart from '~/components/Cart.vue';

describe('Cart.vue', ()=>{

test('', ()=>{

constwrapper=mount(Cart);

expect(wrapper.text()).toContain('Virtual Machine');

    })

})

测试结果截图：