tflori / vue-template-loader-jest

Missing link between vue-template-loader and jest

Vue Template Loader Jest

With vue-template-loader it is possible to extract the html from a typescript single file component to a separate .html file (see https://github.com/ktsn/vue-template-loader). But loading the components in jest tests is not possible anymore.

Here this library comes into play. It is basically just a custom transformer for jest that is using vue-template-loader to compile the template.

Reception

This is untested at all and I only care about my issues. Contributors are highly welcome. Feel free to open pull requests and issues. Write when you are interested in maintaining it.

Usage

Just install this library and add it to your jest config .*html: 'vue-template-loader-jest'. Example:

{
   "jest": {
       "moduleFileExtensions": [
         "js",
         "ts",
         "html"
       ],
       "transform": {
         "^.+\\.tsx?$": "ts-jest",
         "^.+\\.html$": "vue-template-loader-jest"
       },
       "moduleNameMapper": {
         "@view/(.*)": "<rootDir>/resources/views/components/$1"
       }
   }
}

As you can see I'm also using a custom alias for views.

vue-template-loader-jest's Issues

wrapper.find() hasn't access to template

For testing purpose, I try to trigger an event on some html element inside my component for check if my vuex action triggered. In my .spec file I try this:

import Component from '../../../src/components/component'

localVue.use(Vuex)

describe('Component', () => {

  beforeEach(() => {
    actions = {
      actionClick: jest.fn()
    }
    store = new Vuex.Store({
      state: {},
      actions
     })
  })

  it('trigget "actionClick" by button click', () => {
    const wrapper = shallowMount(Component, { store, localVue })
    wrapper.find('button').trigger('click')
    expect(actions.actionClick).toHaveBeenCalled()
  })
})

Template is simple:
<button @click="triggerClick">test</button>

But I have nothing except
[vue-test-utils]: find did not return button, cannot call trigger() on empty Wrapper
Did I miss something?