How do you unittest top level .js of vue.js?

Question

I test my Vue.js project with Jest test tool. For only the coverage, I wish to test top level .js, too. It passed, but I got the error message below.

How do you test top level .js?

console.error node_modules\vue\dist\vue.runtime.common.js:589
  [Vue warn]: Cannot find element: #app
console.error node_modules\vue\dist\vue.runtime.common.js:589
  [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

  (found in <Root>)

My main.js:

import Vue from 'vue'
import App from '@/App'
import store from '@/store'
import router from '@/router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>',
})

My main.spec.js:

import main from '@/main'

describe('main.js', () => {
  beforeEach(() => {
    jest.spyOn(console, 'log')
    jest.spyOn(console, 'error')
  })

  afterEach(() => {
    console.log.mockRestore()
    console.error.mockRestore()
  })

  it('init', () => {
    expect(console.log).not.toHaveBeenCalled()
    expect(console.error).not.toHaveBeenCalled()
  })
})

kimy82 · Accepted Answer · 2018-04-27 15:16:21Z

1

try to do the following. Should work.

In your jest.conf.js file add a setup file.

setupFiles: ['<rootDir>/test/unit/setup']

Create the setup.js and create the div.

createAppDiv();
function createAppDiv() {
 var app = document.createElement('div');
 app.setAttribute('id', 'app');
 document.body.appendChild(app);
}

Run test

Hope that helps

answered Apr 27, 2018 at 15:16

kimy82

4,5343 gold badges25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

isexxx Over a year ago

Thnx, kimy82! It resolved a half. "Cannot find element: #app" disappeared.

Community · Accepted Answer · 2020-06-20 09:12:55Z

Just complementing @kimy82 answer, the error message:

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

This error occurs because the build used for testing is the runtime build. The runtime build doesn't have the template compiler within it.

The best way to solve your problem is to use the render function instead of template attribute.

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  render: h => h(App)
})

As you can see in the vue's package.json, the main script is vue.runtime.common.js

For bundle size issues the runtime build doesn't have the template compiler.

But why?

A: If you'r using SFC, .vue files, you are using webpack to bundle your app and run vue-loader to transpile the .vue file correctly and this loader compiles the template into a render function and than there is no need for a template compiler in runtime.

Check out other builds from vue: https://unpkg.com/[email protected]/dist/

Collectives™ on Stack Overflow

How do you unittest top level .js of vue.js?

My main.js:

My main.spec.js:

2 Answers 2

1 Comment

But why?

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My main.js:

My main.spec.js:

2 Answers 2

1 Comment

But why?

Comments

Your Answer

Sign up or log in

Post as a guest

Related