Setup component testing with jest

Author: roschaefer

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    ["env", { "modules": false }]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["env", { "targets": { "node": "current" }}]
+      ]
+    }
+  }
+}
+

components/Global/Elements/BlockButton/BlockButton.vue

@@ -16,14 +16,14 @@
   </div>
 </template>
 <script>
-import Icon from '../Icon/Icon.vue'
-import Button from '../Button/Button.vue'
+import Icon from '~/components/Global/Elements/Icon/Icon.vue'
+import Button from '~/components/Global/Elements/Button/Button.vue'
 
 export default {
   name: 'hc-block-button',
   components: {
-    Button,
-    Icon
+    'hc-button': Button,
+    'hc-icon': Icon
   },
   props: {
     isPending: {

package.json

@@ -37,7 +37,7 @@
     "eslint": "eslint --ext .js,.vue .",
     "styleguide": "vue-styleguidist server",
     "styleguide:build": "vue-styleguidist build",
-    "test": "ava",
+    "test": "jest",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov"
@@ -119,7 +119,7 @@
     "@nuxtjs/webpackmonitor": "~0.1.0",
     "@vue/server-test-utils": "^1.0.0-beta.25",
     "@vue/test-utils": "^1.0.0-beta.25",
-    "ava": "~0.25.0",
+    "babel-jest": "^23.6.0",
     "backpack-core": "~0.7.0",
     "codecov": "~3.0.4",
     "eslint": "~4.19.1",
@@ -132,6 +132,7 @@
     "eslint-plugin-standard": "~3.1.0",
     "eslint-plugin-vue": "^4.5.0",
     "istanbul": "~0.4.5",
+    "jest": "^23.6.0",
     "jsdom": "^12.0.0",
     "jsdom-global": "^3.0.2",
     "less": "~2.7.3",
@@ -144,11 +145,21 @@
     "sinon": "^6.3.4",
     "source-map-support": "~0.5.6",
     "vue-docgen-api": "^2.3.11",
+    "vue-jest": "^2.6.0",
     "vue-style-loader": "~4.1.0"
   },
-  "ava": {
-    "require": [
-      "./test/helpers/setup.js"
-    ]
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "moduleNameMapper": {
+      "^~/(.*)$": "<rootDir>/$1"
+    },
+    "transform": {
+      ".*\\.(vue)$": "vue-jest",
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
+    }
   }
 }

test/components/Global/Element/BlockButton/BlockButton.test.js

@@ -1,35 +1,40 @@
-import test from 'ava'
-import { mount } from '@vue/test-utils'
-import BlockButton from '../../../../../components/Global/Elements/BlockButton/BlockButton'
-import Icon from '../../../../../components/Global/Elements/Icon/Icon.vue'
-import Button from '../../../../../components/Global/Elements/Button/Button.vue'
-
-const mountBlockButton = (propsData = {}) => {
-  return mount(BlockButton, {
+import { shallowMount } from '@vue/test-utils'
+import BlockButton from '~/components/Global/Elements/BlockButton/BlockButton'
+
+const shallowMountBlockButton = (propsData = {}) => {
+  return shallowMount(BlockButton, {
     mocks: { $t: () => {} },
     propsData
   })
 }
 
-test('It renders a `<div>`.', (t) => {
-  const wrapper = mountBlockButton()
-  t.true(wrapper.is('div'))
+test('renders', () => {
+  const wrapper = shallowMountBlockButton()
+  expect(wrapper.is('div')).toBeTruthy()
 })
 
-test('is enabled when no request is currently pending', (t) => {
-  const wrapper = mountBlockButton({isPending: false})
-  t.deepEqual(wrapper.findAll('hc-button').length, 1)
-  t.deepEqual(wrapper.find('hc-button').attributes(), {color: 'button'})
+describe('no request pending', () => {
+  test('is enabled', () => {
+    const wrapper = shallowMountBlockButton({isPending: false})
+    expect(wrapper.findAll('hc-button-stub')).toHaveLength(1)
+    expect(wrapper.find('hc-button-stub').attributes()).toEqual(expect.not.objectContaining({isloading: 'true'}))
+  })
 })
 
-test('shows a loading spinner when a request is pending', (t) => {
-  const wrapper = mountBlockButton({isPending: true})
-  t.truthy(wrapper.find('hc-button').attributes().isloading)
-})
+describe('request pending', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMountBlockButton({isPending: true})
+  })
+
+  test('shows a loading spinner', () => {
+    expect(wrapper.find('hc-button-stub').attributes().isloading).toBeTruthy()
+  })
 
-test('is disabled when a request is pending', (t) => {
-  const wrapper = mountBlockButton({isPending: true})
-  t.truthy(wrapper.find('hc-button').attributes().disabled)
+  test('is disabled', () => {
+    expect(wrapper.find('hc-button-stub').attributes().disabled).toBeTruthy()
+  })
 })
 
 /*

test/components/Global/Element/Icon/hcIcon.test.js

@@ -1,9 +1,8 @@
-import test from 'ava'
 import { shallowMount } from '@vue/test-utils'
 import Icon from '../../../../../components/Global/Elements/Icon/Icon'
 
-test('It should render an `<i>`.', (t) => {
+test('It should render an `<i>`.', () => {
   const wrapper = shallowMount(Icon)
 
-  t.true(wrapper.is('i'))
+  expect(wrapper.is('i')).toBeTruthy()
 })