Merge #149

149: Update tests configuration r=bidoubiwa a=bidoubiwa

fixes: #144 
fixes: #147

Tests were failing in the background and were depending on old libraries.  


Co-authored-by: Charlotte Vermandel <charlottevermandel@gmail.com>

Author: bors[bot]

.github/dependabot.yml

@@ -14,3 +14,4 @@ updates:
   ignore:
       - dependency-name: "eslint*"
       - dependency-name: "babel-eslint"
+      - dependency-name: "@vue/*"

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

jest.config.js

@@ -1,8 +1,10 @@
 module.exports = {
   rootDir: '.',
   testMatch: ['<rootDir>/tests/**/*.js?(x)'],
-  testEnvironment: 'jest-environment-jsdom',
-  preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
+  preset: '@vue/cli-plugin-unit-jest',
+  moduleNameMapper: {
+    'docs-searchbar.js': '<rootDir>/node_modules/docs-searchbar.js/dist/cdn/docs-searchbar.js'
+  },
   globals: {
     HOST_URL: 'https://e10b17e6.getmeili.com',
     API_KEY: 'b4ff9313299e65ce4e259d3aa59730d2829c9a6805aa15b83cdbd63b20563155',

package.json

@@ -4,10 +4,10 @@
   "description": "Relevant and typo tolerant search bar for your Vuepress",
   "author": "Clémentine Urquizar <clementine@meilisearch.com>",
   "scripts": {
+    "serve": "yarn --cwd ./playground install && yarn --cwd ./playground dev",
     "lint": "eslint '{.,tests}/**/*.{vue,js}'",
     "lint:fix": "yarn lint --fix",
-    "serve": "yarn --cwd ./playground install && yarn --cwd ./playground dev",
-    "test": "jest"
+    "test": "vue-cli-service test:unit"
   },
   "main": "index.js",
   "dependencies": {
@@ -18,16 +18,17 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-unit-jest": "^4.5.13",
-    "@vue/test-utils": "1.2.0",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/test-utils": "^1.2.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.25.0",
-    "eslint-config-standard": "^16.0.2",
+    "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^7.9.0",
-    "jest": "^26.0.1",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11"
   },

tests/MeiliSearchBoxTest.js

@@ -2,14 +2,18 @@ import { shallowMount } from '@vue/test-utils'
 import MeiliSearchBox from '../MeiliSearchBox.vue'
 
 describe('MeiliSearchBox', () => {
-  const wrapper = shallowMount(
-    MeiliSearchBox,
-    {
-      mocks: {
-        $site: { themeConfig: {} }
+  let wrapper = null
+
+  beforeEach(() => {
+    wrapper = shallowMount(
+      MeiliSearchBox,
+      {
+        mocks: {
+          $site: { themeConfig: {} }
+        }
       }
-    }
-  )
+    )
+  })
 
   it('renders default form and input', () => {
     expect(wrapper.html()).toContain('<form id="search-form" role="search" class="meilisearch-search-wrapper search-box">')