Add test support for TypeScript-Classes that extend from Vue

[h2xd]

Hello there,

we would like to test our models with the vue-test-utils library.
But somehow the test-utils are not resolving the model, when it's mounted inside @vue/test-utils.createLocalVue.

Implementation

Here is a short example of our model and the test implementation:

import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component({
  name: 'Authentication',
})
export class AuthenticationModel extends Vue {
  private _authenticated = false

  get authenticated() {
     return this._authenticated
  }

  public async login(email: string, password: string) {
    // ... authentication logic agains a mocked api
    this._authenticated = await this.api.login(email, password)
  }
}

import { createLocalVue } from '@vue/test-utils'
import { AuthenticationModel } from './auth'

async function generateAuthenticationModel(): Promise<AuthenticationModel> {
  const LocalVue = createLocalVue({
    models: { Auth: AuthenticationModel },
  })

  const { Auth } = LocalVue

  return Auth
}

it('should be able to login user', async () => {
  const AuthenticationTestModel = await generateAuthenticationModel()

  expect(AuthenticationTestModel.authenticated).toBeFalsy()

  await AuthenticationTestModel.login({
    email: '[email protected]',
    password: 'some-password-that-matches',
  })

  expect(AuthenticationTestModel.authenticated).toBeTruthy()
})

Expected

LocalVue should be filled with the imported and mounted model

---

Hit me up, if you need more examples or further explanation. :)

[Djaler]

Hello, @h2xd. Have you found a way to test your typescript models?

[Djaler]

Hmm, looks like you don't need to use vue-test-utils to test a model. Just create its instance, like new AuthenticationModel() and test it.

But I have a new question now. How can I mock model in host component? @JohannesLamberts can you help?