vue-states
vue-states copied to clipboard
Add test support for TypeScript-Classes that extend from Vue
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. :)
Hello, @h2xd. Have you found a way to test your typescript models?
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?