Nativescript-vue: [DOCS] NativeScript Vue Testing Docs??

[IamManchanda]

Docs on testing like Angular one doesn't exist for NativeScript Vue!
https://docs.nativescript.org/tooling/testing

What problem does this feature solve?

N.A

What does the proposed API look like?

N.A

[brunokunace]

For testing Vuejs applications, you can use Vue Jest (https://github.com/vuejs/vue-jest), i think is the best way for testing this.

[jolafrite]

this is not enough, because you will have to mock every nativescript modules.
Maybe we could have a jest-nativescript-preset and then create on the top jest-nativescript-vue-preset or jest-nativescript-angular-preset ?

[t3hmrman]

What kind of testing do you mean?

Unit? I'm going to assume you don't mean unit because that's just loading a function and running it -- do you mean integration between components?

Component-level Integration? This should consist of loading component(s), creating instances, and then forcing some interaction between them then checking their internal state/emitted events/whatever else. This should be possible just by importing nativescript-vue and creating components and doing stuff as normal.

E2E / Acceptance? The most important tests (IMO), the ones that test whether the app as a whole is working, getting as close to being a user as possible. nativescript-vue-ui-tests repo exists for end to end testing with appium, it uses jest, and should answer some of these questions. there's a big PR open for upgraded appium support and some other stuff thanks to @msaelices but I think the repo works as-is (it's being used).

[mtancoigne]

@jolafrite I created a repo with a sample setup for Nativescript-vue + Appium, if that can help...

[phortx]

This is still an issue, I think.

I've just started with nativescript-vue (I've decent experience with vue) and couldn't start coding for 2 days now due to the fact, that I can't setup tests.

A example project with karma/jest and a simple component unit/integration test would be nice.

[bryanleetc]

I think this is an issue too. Having support for jest and @vue/test-utils would allow us to unit test vue components. @vue/test-utils does not seem to be working out of the box for me with nativescript-vue.

[rigor789]

@msaelices has been trying to get vue test utils to work in ns. (https://github.com/nativescript-vue/nativescript-vue/pull/486)

@bryanleetc Out of curiosity, what would you expect to be able to test with the test utils?

It would generate the HTML string of a component, but there's no HTML in NativeScript, so wonder how useful any assertions on this would be? Are you interested in ensuring there are certain elements in the markup etc.

[bryanleetc]

@rigor789 Ensuring certain elements in markup would be helpful for sure. A few other use cases:

• Testing Vuex store actions
• Testing methods and computed properties of Vue components

[msaelices]

@rigor789 @bryanleetc I've just revisited the #486 PR but I'm stuck in a jest problem because it cannot parse flow types in JS source (imports from Vue source).

[bryanleetc]

@IamManchanda @msaelices I managed to set up Jest and Vue Test Utils for my app in the end. Here is a sample repo.

If a little self plugging is allowed here, I wrote a post in my blog with more details about my approach.

[Scra3]

Thank you very much for the blog, you save my project 😊

[methompson]

I've been working on trying to get Jest to work with a project I'm working on. The problem I'm running into is that Jest has a problem finding globally defined native objects. For instance, in iOS, I keep getting "ReferenceError: NSString is not defined" where NSString is a class defined in the iOS API (other examples include UIView, or NSDictionary).

Does anyone have an idea on how to point Jest to these classes or how I could stub them?

[bryanleetc]

@methompson You might want to give the method I wrote in my blog post or the sample repo linked above ^ a try. I run the tests with vanilla Vue and hence avoid having to stub all the native classes (NSString etc.)

[methompson]

@bryanleetc I ended up just mocking every module that my components rely upon. I tried following your blog guide, but none of the tests could get past the issue with NSString or other native components. In situations where the components or functions I wrote used a native object, I just wrote a mock Implementation simply for testing purposes.

[redelman431]

E2E / Acceptance? The most important tests (IMO), the ones that test whether the app as a whole is working, getting as close to being a user as possible. nativescript-vue-ui-tests repo exists for end to end testing with appium, it uses jest, and should answer some of these questions. there's a big PR open for upgraded appium support and some other stuff thanks to @msaelices but I think the repo works as-is (it's being used).

@t3hmrman. Unfortunately I don't see any sign of Jest being used in that repo. I don't even see it in the package. json file either. Kudos to @bryanleetc for getting Jest and Vue Test Utils to work. But Jest does not appear to work with Appium and Nativescript-Vue without crashing. Apparently nativescript-dev-appium uses cloudhead/vargs. A dependency that has not been maintained in 10 years. Apparently that dependency has an unresolved issue with a reserved name. Other test runners don't have a problem with it except Jest for some odd reason. Would switching to the mike-lang fork of vargs in nativescript-dev-appium make any difference? If Jest can't be used in all three stages of testing, might as well settle with mocha, something both frameworks can agree upon.

[t3hmrman]

I think what I was referring to was a couple commits from when the repo used to use jest

But IMO use whatever works and doesn't crash, unless you have some hard requirement or very specific benefit that Jest provides for some reason -- integration with appium is the important/hard bit IMO, which test runner you're using seems a bit less important.

[rutherang]

@IamManchanda @msaelices I managed to set up Jest and Vue Test Utils for my app in the end. Here is a sample repo.

If a little self plugging is allowed here, I wrote a post in my blog with more details about my approach.

Hi @bryanleetc,

Great work making the test work using jest and vue test utils

I manage to run the test but when I add a button named send
and tried what you recommend

const button = wrapper.find('#send');
expect(button.exists()).toBe(true); <---- this pass
button.vm.$emit('tap'); <------ error thrown here

“TypeError: Cannot read property ‘$emit’ of undefined”

Any idea what is causing it?

[rutherang]

Yes, I ran the actual code on simulator and it is there

I also put assertion on the test to make sure it exist but somehow the founded button doesn't have "vm" so the vm part is undefined

[rutherang]

the content on the blog says

// This will not work
wrapper.find('actionitem-stub').trigger('tap');

// Instead, emit an from the stub's ViewModel
wrapper.find('actionitem-stub').vm.$emit('tap')

what does he mean by "actionitem-stub"?

does Button count as actionitem-stub?

[rutherang]

Found my mistake,

I have not put nativescript Button on the nativescript-vue-stubs.js

Thank you for the help :)