0

I'm trying to unit test a VueJS component containing a Map from HereMaps using Mocha + Chai. I followed the official tutorial from the VueJS documentation and it went smoothly.

However, when I want to unit test my Map.vue component (containing a HereMap), the component doesn't seem to be mounted properly and there is no way to get past the terminal errors. I think it might be a problem from the scripts the HereMap needs, but I'm not sure.

My unit test mapTest.spec.ts is the following:

import { shallowMount } from '@vue/test-utils'
import Map from '@/components/Map.vue'
import { expect } from 'chai'

describe('Map', () => {
    const wrapper = shallowMount(Map);
    it('mounts', () => {
        wrapper.setProps({latitude: 0, longitude: 0});
        expect(true).equal(true);
  })
})

When I comment the line const wrapper = shallowMount(Map), the errors disappear and the test runs smoothly.

Does anyone know how to properly unit test a HereMap?

Thanks a lot for the help.

The errors I get from Mocha are as follows:

 RUNTIME EXCEPTION  Exception occurred while loading your tests

TypeError: self.eval is not a function
    at Window.<anonymous> (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/src/vendor/here-maps/3.1/mapsjs-core.js:34:1)
    at Object../src/vendor/here-maps/3.1/mapsjs-core.js (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/src/vendor/here-maps/3.1/mapsjs-core.js:404:1)
    at __webpack_require__ (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/webpack/bootstrap:19:1)
    at Object../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/vuetify-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Map.vue?vue&type=script&lang=ts& (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/src/components/Map.vue:10:1)
    at __webpack_require__ (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/webpack/bootstrap:19:1)
    at Module../src/components/Map.vue?vue&type=script&lang=ts& (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/src/components/Map.vue?0e8b:1:1)
    at __webpack_require__ (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/webpack/bootstrap:19:1)
    at Module../src/components/Map.vue (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/src/components/Map.vue?737c:1:1)
    at __webpack_require__ (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/webpack/bootstrap:19:1)
    at Object../tests/unit/map/mapTest.spec.ts (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/tests/unit/map/mapTest.spec.ts:2:1)
    at __webpack_require__ (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/webpack/bootstrap:19:1)
    at run (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/node_modules/@vue/cli-plugin-unit-mocha/node_modules/mochapack/lib/entry.js:3:1)
    at Array.forEach (<anonymous>)
    at Object../node_modules/@vue/cli-plugin-unit-mocha/node_modules/mochapack/lib/entry.js (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/node_modules/@vue/cli-plugin-unit-mocha/node_modules/mochapack/lib/entry.js:10:1)
    at __webpack_require__ (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/webpack/bootstrap:19:1)
    at /home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/webpack:/webpack/bootstrap:83:1
    at Object.<anonymous> (/home/amaury/Documents/web-projects/projet-restau/frontend/dist/js/main.js:87:10)
    at Module._compile (internal/modules/cjs/loader.js:1123:30)
    at Object._module2.default._extensions.<computed> [as .js] (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/@vue/cli-plugin-unit-mocha/node_modules/mochapack/src/util/registerRequireHook.js:99:12)
    at Module.load (internal/modules/cjs/loader.js:972:32)
    at Function.Module._load (internal/modules/cjs/loader.js:872:14)
    at Module.require (internal/modules/cjs/loader.js:1012:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at /home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/@vue/cli-plugin-unit-mocha/node_modules/mocha/lib/mocha.js:334:36
    at Array.forEach (<anonymous>)
    at Mocha.loadFiles (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/@vue/cli-plugin-unit-mocha/node_modules/mocha/lib/mocha.js:331:14)
    at Mocha.run (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/@vue/cli-plugin-unit-mocha/node_modules/mocha/lib/mocha.js:809:10)
    at cb (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/@vue/cli-plugin-unit-mocha/node_modules/mochapack/src/runner/TestRunner.js:96:21)
    at /home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/@vue/cli-plugin-unit-mocha/node_modules/mochapack/src/webpack/compiler/registerReadyCallback.js:12:7
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:61:1)
    at AsyncSeriesHook.lazyCompileHook (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/tapable/lib/Hook.js:154:20)
    at /home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/webpack/lib/Compiler.js:304:22
    at Compiler.emitRecords (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/webpack/lib/Compiler.js:499:39)
    at /home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/webpack/lib/Compiler.js:298:10
    at /home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/webpack/lib/Compiler.js:485:14
    at eval (eval at create (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at /home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/copy-webpack-plugin/dist/index.js:115:7
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at AsyncSeriesHook.lazyCompileHook (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/tapable/lib/Hook.js:154:20)
    at /home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/webpack/lib/Compiler.js:482:27
    at /home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/neo-async/async.js:2818:7
    at done (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at /home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/webpack/lib/Compiler.js:464:33
    at MemoryFileSystem.writeFile (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/memory-fs/lib/MemoryFileSystem.js:328:9)
    at writeOut (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/webpack/lib/Compiler.js:462:30)
    at Immediate._onImmediate (/home/amaury/Documents/web-projects/projet-restau/frontend/node_modules/memory-fs/lib/MemoryFileSystem.js:288:4)
    at processImmediate (internal/timers.js:456:21)
    at process.topLevelDomainCallback (domain.js:137:15)
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
AraumaX
  • 1
  • The component you're testing isn't shown. You need to mock here-maps module. As a rule of thumb, almost any third-party lib should be mocked in unit tests. Mocha may be not the best choice because it doesn't offer built-in module mocking, while Jest does. – Estus Flask Apr 16 '20 at 18:28
  • I'm going to hazard a guess and say you're not using HereMap correctly in your component. Can you check that it works in your component manually first? Be sure to check the browser's console log with errors set to visible. Having even the stripped down, simplified version of your code might be helpful in answering questions. – J.Ko Apr 16 '20 at 20:21
  • @EstusFlask Thanks for your comment. Sorry I'm a bit of a noob in the domain, I already heard about mocking before but I'm not sure what it means exactly. What would mocking here-maps module do and how should I do that (using Jest I guess)? – AraumaX Apr 17 '20 at 09:35
  • @J.Ko Thanks for your comment. The HereMap actually works and I get zero error in the console when I run the development server or build for production. I can drag/drop the map, click, zoom manually. I can add the basic structure of the ```Map.vue``` component if you'd like. – AraumaX Apr 17 '20 at 09:38
  • In the error you posted Heremaps tries to call `eval` in a browser way and fails to do this in Node where the test runs, there's no DOM in Node so it would fail any way. So you need to mock `here-maps` module with dummy implementation that doesn't affect your own code in unpredictable ways in tests, so it's used everywhere you have `import 'here-maps'` instead of real module. See how it's done in Jest https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options , you'll be on your own with other frameworks like Mocha (third-party utils like `mock-require` are needed there) – Estus Flask Apr 17 '20 at 09:51
  • @AraumaX I can't guarantee that I'll be able to help out, but generally, it's best to give as much as context as possible. Of course you can't just plaster your whole codebase either. So there has to be a good balance. If you think the component code will help with the debugging, you should post it. – J.Ko Apr 17 '20 at 19:05

0 Answers0