Instantly share code, notes, and snippets.

View snapshotTesting.js
test('should render content correctly', () => {
const wrapper = mount(CoolCard, { store, localVue });
expect(wrapper.vm.$el).toMatchSnapshot();
});
View jestSerializer
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"snapshotSerializers": [
"jest-serializer-vue"
],
"transform": {
"^.+\\.js$": "babel-jest",
View CoolCardNaive.test.js
import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import CoolCard from '../components/CoolCard.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const actions = {
incrementTotal: jest.fn()
View usingStoreFactory.test.js
import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import CoolCard from '../components/CoolCard.vue';
import StoreFactory from './utils/StoreFactory';
const localVue = createLocalVue();
localVue.use(Vuex);
const actions = {
incrementTotal: jest.fn()
View storeFactory.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default (getters, actions) =>
new Vuex.Store({
modules: {
basket: {
namespaced: true,
View mockingLocalStorage.js
export function setGlobals() {
global.window.localStorage = {
setItem: (key, value) => null,
getItem: (key) => [],
};
}
View mocking routes
const $route = {
params: {
id: 15,
},
};
const wrapper = mount(ComplexComponent, {
mocks: { $route },
});
View someComputed
test('someComputedProperty should evaluate buzzwords correctly', () => {
const wrapper = mount(CoolCard, {
propsData: {
wow: 'wow'
}
});
wrapper.setData({
buzzword: 'Big Data'
});
expect(wrapper.vm.someComputedProperty).toEqual('Big Data is very big');
View someMethod
test('someMethod should add numbers together', () => {
const wrapper = mount(CoolCard);
expect(wrapper.vm.someMethod(1, 2)).toEqual(3);
});
View .eslintrc (root)
"overrides": [
{
"files": [ "**/*.test.js" ],
"rules": {
"quotes": [ 2, "single" ]
}
}
]