Not working in Browser

[emahuni]

Wanted to use this in browser testing using Mocha, chai, sinon, expect... but it seems like this is only meant to be used in Node or at least after building it. I did that using browserify, but it is throwing this error:

VM1397:27 [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.

This implies that I have to change it's source for it work properly for my case, which is something I think shouldn't happen. I thought maybe I am missing something or maybe that scenario wasn't thought through enough.

Is there a clear proper way of using these utilities in the browser without any complicated setup processes. Simply getting the script using the script tag and start using it right away.

[eddyerburgh]

There isn't a runtime version of vue-test-utils. There is a commonjs version, a umd version and an amd version, all available in the dist directory.

Can you post a repo with your build set up, I can debug and see what's happening.

[wparad]

I have had similar problems in the past, are you creating a new vue component in the unit test file? It turned out my team was doing that to mock router-link but then we realized we could just override the render function instead of template. That also allowed us to decouple from building a vue component in the test as well.

[emahuni]

I copied the dist file vue-test-utils.js and removed the following line so that I use my own Vue instance and it worked.

var Vue = _interopDefault(require('vue')); //removed this line of commented it.

So I exposed Vue as window.Vue so that when I require vue-test-utils.js it uses that instead of the runtime only it was requiring.

Then I created a file requireVTUs.js that requires my modified vue-test-utils.js and assigned it to an object window.vtus like so:

window.vtus = require ('./vue-test-utils'); // making sure I require the modified version.

Then I ran browserify requireVTUs.js > vtus.js to build it for use in the browser.

Then I used usual script tag in my test HTML <script src="./helpers/vtus.js"></script>

Now when testing I do: let wrapper = vtus.mount(testCompo);

That worked well.

My suggestion is can't we make that code to simply require Vue only when it's undefined or just leave those dependencies to be handled by the user?

Also please include a proper runtime/browser build.

[eddyerburgh]

My suggestion is can't we make that code to simply require Vue only when it's undefined or just leave those dependencies to be handled by the user?

It's set as a peer dependency in the commonjs build, so users can use the version they've installed. In the AMD and UMD version, it needs to be passed as a dependency. So in those builds, the user is required to supply Vue themselves.

Also please include a proper runtime/browser build.

Yes, that's a good idea 🙂. With a runtime build, it will work how you described. The user will be able to add Vue and Vue Template Compiler as global variables, and the runtime build will use them

[eddyerburgh]

I've just pushed a version that should run in the browser - https://github.com/vuejs/vue-test-utils/blob/dev/dist/vue-test-utils.iife.js

[emahuni]

That's great, I'll give it a shot ASAP.

[emahuni]

Sorry for the late feedback. I have updated by running npm update and that iife file isn't in the dist folder. I removed the package and tried to reinstall using the install example in readme file, but there is actually an error that's throwing a 406 from the server, in the install command. So I changed the bit to npm install --save-dev https://github.com/vuejs/vue-test-utils.git from npm install --save-dev https://github.com/vuejs/vue-test-utils/ and it managed to install, but still the file isn't there. Am I missing something?

These are all the files for the package:

node_modules\vue-test-utils\LICENSE
node_modules\vue-test-utils\package.json
node_modules\vue-test-utils\README.md
node_modules\vue-test-utils\dist\vue-test-utils.js
node_modules\vue-test-utils\types\index.d.ts

Note that i can see the file in the git repo here, so why isn't it being pulled in?

[emahuni]

I have cloned just to test it, but I have not solved the above problem. The new issue is that vue-template-compiler now needs to be compiled also since it's a Node script. Isn't it simpler to just require it in there if it's not available on the global space before trying to use it, ie; before the iief, so that it can be built together or something along those lines?

Or is it that the template compiler has to have its own browser version as well?

[eddyerburgh]

vue and vue-template-compiler need to be the same version, so including it in the final build would force users to test with whatever version of vue-template-compiler we used.

You're right though, at the moment it's not possible to run the vue-template-compiler in the browser. We're going to release one in version 2.5.0. At the moment, you can just mock it by adding window.vueTemplateCompiler = {} before running the iief script in the browser.

The 406 errors would be from using an old version of npm.

Sorry for the difficult browser build in the meantime, but we'll get it up and running and add some docs soon!

[emahuni]

Ok cool, you are the best... let me work on; 1: update npm 2: mock vueTemplateCompiler (but won't that cause problems later when actually using vue-test-utils?)

[emahuni]

ok... updated npm, removed the clone version and tried to install vue-test-utils afresh using the command in the readme file. It worked well, but the iief file is still no nowhere to be found:

node_modules\vue-test-utils\LICENSE
node_modules\vue-test-utils\package.json
node_modules\vue-test-utils\README.md
node_modules\vue-test-utils\dist\vue-test-utils.js
node_modules\vue-test-utils\types\index.d.ts

Any ideas?

[eddyerburgh]

Ah yes, sorry. I thought that npm resolved the default branch when you used the URL.

It should work correctly with this command:

npm install --save-dev git://github.com/vuejs/vue-test-utils.git#dev

[emahuni]

seems like the variable vueTemplateCompiler is a different variable from what VueTemplateCompiler is exposing in the browser version, note the capital letter 'V'. either fix that in vue-test-utils or in vue-template-compiler.

i suggest fix to be done here in vue-test-utils: every instance of vueTemplateCompiler to be changed to VueTemplateCompiler and vueTestUtils to VueTestUtils.

VueTemplateCompiler var should also be attached to window in addition to global. Again, in the iife file, vueTestUtils var should be attached to global and window

This helps when using jspm, systemjs etc. Just importing or script tagging these files should be enough to expose those modules to the window and global object and with their correct types; VueTemplateCompiler and VueTestUtils

[emahuni]

the above happened when i was working with another project where I installed the latest vue-test-utils and it wanted to use vue-template-compiler, regardless of using Vue full version in the browser. It seems like there were some changes that were done that now require the use of vue-template-compiler in the browser regardless of the loaded vue version.

Hence i ended up hitting those bugs with the types.

[eddyerburgh]

I've just released a fix that uses VueTemplateCompiler instead of vueTempalteCompiler.

Do you think vueTestUtils should be Pascal case as VueTestUtils to keep in line with Vue and VueTemplateCompiler?

[eddyerburgh]

I believe the browser version works correctly, so I'm closing this issue. Happy to discuss further if people have issues with it