Unit tests schema generator for Vue components
Generated tests are compatible with:
Generator is using for template engine.
npm install -g vue-unit-test-generator
vutg ./path/to/component.vue
The function will generate a spec test file for the component.vue
at the path
./path/to/__tests__/component.spec.js
The test file will contain a boilerplate for tests with prepared mocks.
# run on dir containing `state.js` `actions.js` `mutations.js` and `getters.js`
vutg ./path/to/store/storeName/
# run on single file
vutg ./path/to/store/storeName.js
The function will generate a spec test files for actions, mutations and getters
./path/to/store/storeName/__tests__/actions.spec.js
./path/to/store/storeName/__tests__/mutations.spec.js
./path/to/store/storeName/__tests__/getters.spec.js
-h --help # show this message and quit
-n --name # set custom name for spec file
-d --testDir # relative directory where spec file will be placed, default "__tests__"
-a --addTests # will add initial tests schemas in "describe()" section
-v --verbose # print extracted data used for mocking
--template # set path to custom hygen.io template
--dry # dry run
The generator parses component files with multiple regexp to extract data that is used to create mocks in the spec file. It is NOT able to understand JS/Vue code!
- mocks props
- mocks
$emit
calls - mocks
$http
chain call (e.g.$http('...').get().json()
) - mocks providers
- mocks
window.open
- mocks and stubs custom non-built-in services which starts from
$
- mocks store and stubs all actions with
jest.fn()
- actions by
mapActions
or$store.dispatch('...')
- states by
mapState
or$store.state.
- getters by
mapGetters
or$store.getters.
- actions by
-
Generate spec file
vutg ./YourComponent.vue
-
Fill mocked fields with test data (replace
/* TODO */
comments) -
In
beforeEach
ortest
initialize wrapper withmountComponent
with test-specific data
test('should match snapshot', () => {
wrapper = mountComponent({
myPropName: 'custom value',
myStoreField: 'custom store value',
});
...
expect(wrapper.element).toMatchSnapshot();
});
- Fill
test
for eachaction
(replace/* TODO */
comments)
test('should call "someAction" action when something', () => {
...
expect(stubs.someAction).toHaveBeenCalledTimes(1);
});
- Fill
test
for eachemit
(replace/* TODO */
comments)
test('should emit "close" event when something', () => {
...
expect(wrapper.emitted('close')).toBeTruthy();
});
- Add tests for
child components events
test('should do something on child-component "@some"', () => {
wrapper.findComponent({ ref: 'childComponent' }).vm.$emit('some');
...
})
- Add tests for other
template behaviours
test('should do something when someProperty is false', () => {
wrapper = mountComponent({ someProperty: false });
...
})
If you find a bug or have an idea for a new feature, please open an issue or submit a pull request. We welcome all contributions!
vue-unit-test-generator is licensed under the MIT License. See LICENSE for more information.