- Shop NEW!
- The Vue Instance
- Template Syntax
- Computed Properties and Watchers
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Event Handling
- Form Input Bindings
- Reactivity in Depth
- Transition Effects
- Transitioning State
- Render Functions
- Custom Directives
- Single File Components
- Production Deployment Tips
- State Management
- Unit Testing
- Server-Side Rendering
- TypeScript Support
- Migration from Vue 1.x
- Migration from Vue Router 0.7.x
- Migration from Vuex 0.6.x to 1.0
- Comparison with Other Frameworks
- Join the Vue.js Community!
Anything compatible with a module-based build system will work, but if you’re looking for a specific recommendation, try the Karma test runner. It has a lot of community plugins, including support for Webpack and Browserify. For detailed setup, please refer to each project’s respective documentation, though these example Karma configurations for Webpack and Browserify may help you get started.
In terms of code structure for testing, you don’t have to do anything special in your components to make them testable. Just export the raw options:
When you test that component, all you have to do is import the object along with Vue to make many common assertions:
A lot of component’s render output are primarily determined by the props they receive. In fact, if a component’s render output solely depends on its props, it becomes quite straightforward to test, similar to asserting the return value of a pure function with different arguments. Take a contrived example:
You can assert its render output with different props using the
Since Vue performs DOM updates asynchronously, assertions on DOM updates resulting from state change will have to be made in a
We are planning to work on a collection of common test helpers that makes it even simpler to render components with different constraints (e.g. shallow rendering that ignores child components) and assert their output.