feat: add jest.

Author: bolechen

.gitignore

@@ -10,3 +10,4 @@ Homestead.json
 Homestead.yaml
 npm-debug.log
 yarn-error.log
+coverage

README.md

@@ -0,0 +1,2 @@
+# laravel-vue-test-use-jest
+Integrate Jest and code-coverage with Laravel Mix 4 and Laravel 6

babel.config.js

@@ -0,0 +1,16 @@
+// babel.config.js
+module.exports = api => {
+  const isTest = api.env('test');
+
+  return {
+    presets: [
+      [
+        '@babel/preset-env', {
+          targets: {
+            node: 'current',
+          },
+        },
+      ],
+    ]
+  }
+}

jest.config.js

@@ -0,0 +1,19 @@
+// jest.config.js
+module.exports = {
+  testRegex: 'resources/js/tests/.*.spec.js$',
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/resources/js/$1"
+  },
+  moduleFileExtensions: ['js', 'json', 'vue'],
+  transform: {
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+  collectCoverageFrom: [
+    'resources/js/**/*.{js,jsx,ts,tsx,vue}',
+  ],
+  collectCoverage: true,
+  coverageReporters: ['html', 'lcov', 'text-summary'],
+  coverageDirectory: './coverage'
+}

package.json

@@ -7,12 +7,19 @@
         "watch-poll": "npm run watch -- --watch-poll",
         "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
         "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "test": "jest"
     },
     "devDependencies": {
+        "@babel/preset-env": "^7.7.1",
+        "@vue/test-utils": "1.0.0-beta.29",
         "axios": "^0.19",
+        "babel-core": "^7.0.0-bridge.0",
+        "babel-jest": "^24.9.0",
         "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
+        "jest": "^24.9.0",
+        "jest-serializer-vue": "^2.0.2",
         "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "lodash": "^4.17.13",
@@ -21,6 +28,8 @@
         "sass": "^1.20.1",
         "sass-loader": "7.*",
         "vue": "^2.5.17",
-        "vue-template-compiler": "^2.6.10"
+        "vue-jest": "^3.0.5",
+        "vue-template-compiler": "^2.6.10",
+        "vuex": "^3.1.2"
     }
 }

resources/js/components/ExampleComponent.vue

@@ -3,7 +3,7 @@
         <div class="row justify-content-center">
             <div class="col-md-8">
                 <div class="card">
-                    <div class="card-header">Example Component</div>
+                    <div class="card-header">Example Component one</div>
 
                     <div class="card-body">
                         I'm an example component.

resources/js/tests/__snapshots__/example.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExampleComponent test case one 1`] = `
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-md-8">
+      <div class="card">
+        <div class="card-header">Example Component one</div>
+        <div class="card-body">
+          I'm an example component.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

resources/js/tests/example.spec.js

@@ -0,0 +1,25 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import ExampleComponent from '@/components/ExampleComponent.vue'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+test('it works', () => {
+    expect(1 + 1).toBe(2)
+})
+
+describe('ExampleComponent', () => {
+    test('test case one', () => {
+        const wrapper = mount(ExampleComponent, {
+            localVue,
+            propsData: {},
+            mocks: {},
+            stubs: {},
+            methods: {}
+        })
+
+        expect(wrapper.isVueInstance()).toBeTruthy()
+        expect(wrapper).toMatchSnapshot()
+    })
+})