Awesome Open Source
Awesome Open Source

Component Fixture

CircleCI Coverage codebeat badge GitHub open issues Npm version MIT License



Interactive test fixture for vue component.

Component is designed to receive any component you want to test as a default slot


  <!-- Use the default slot to create the component under test -->


Component-fixture will automatically:

  • Mirror all the props of the tested component
  • Bind this data to the component under-test
  • Display all the props in a form so that it is possible to edit them


  • Respect props type and use custom input for each type
  • Provide input for objects and function
  • Create v-model binding if needed
  • Support of two-way data binding using the .sync modifier pattern
  • Custom props validation when available
  • Support component with slots
  • Display of all events emitted by the component
  • Display of component data and computed information
  • Exposition of component method as buttons that can be called with display of the produced result
  • Compatible with hot-reload: automatic update on changes happening on the tested component

Example using vue-slider-component:


Uses cases

Why would you need such a component?

ComponentFixture is intended to be used only in a test/dev context with two main applications.

Discovering third party component

  • Explore Interactively a component you are willing to use in your application.
  • Understand by example what the props role.
  • Quickly identify bugs and limitation on the component.

Testing a component you creates

  • Create an example usage of your component that will update automatically
  • Interact with the component while you create it.
  • Easily identify bugs

Next steps

  • [x] Provide a way to default component props
  • [ ] Monkey testing: use randomly generated updates on component props.

This will be provided on next major version.

Example usage

<sandbox :defaults="{value: 23}">

  <!-- Use the default slot to for the component under test -->

import { Sandbox } from 'component-fixture'
import "component-fixture/dist/ComponentFixture.css"
import { componentUnderTest } from 'componentUnderTest'

export default {
  components: {



  • default Slot for the component under test


  • defaults Object (optional)

    Value: {[propName]: defaultValue}

    Object sets to default the component under-test props. For example if you want to default the props value with 46, use: :defaults="{value: 46}"

  • possibleValues Object (optional)

    Value: {[propName]: [...values]}

    Object used to predefined the possible values for a given props. The values defined by possibleValues will be used to create a select from the provided values for the given props. For example if you want to limit the props value to 1,2, 3 or 4, use: :possibleValues="{value: [1,2,3,4]}"

  • componentHeight String (optional)

    Style to be applied to the component under-test height. Default to null.

  • componentWidth String (optional)

    Style to be applied to the component under-test width. Default to null.

  • useStore Boolean (default: false)

    If true and vuex is being used, a store module is automatically created and its state is bound to component props.


npm install ComponentFixture

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

Update the API section of with generated documentation

npm run doc:build

Run style guide dev server

npm run styleguide

Generate a static HTML style guide

npm run styleguide:build

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
vue (3,783)Β 
vuejs (1,023)Β 
component (527)Β 
testing-tools (188)Β 
playground (83)Β 
sandbox (62)Β 

Find Open Source By Browsing 7,000 Topics Across 59 Categories