Skip to content

Commit ba798c8

Browse files
afontcuMonicaBarinaga
afontcu
authored and
MonicaBarinaga
committed
Add POC for Vuex 4
1 parent d325540 commit ba798c8

File tree

4 files changed

+75
-71
lines changed

4 files changed

+75
-71
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"@testing-library/dom": "^7.24.3",
4848
"@babel/runtime": "^7.9.6",
4949
"@types/testing-library__vue": "*",
50+
"lodash.merge": "^4.6.2",
5051
"@vue/test-utils": "^2.0.0-beta.2"
5152
},
5253
"devDependencies": {
@@ -63,7 +64,6 @@
6364
"isomorphic-unfetch": "^3.0.0",
6465
"jest-serializer-vue": "^2.0.2",
6566
"kcd-scripts": "^6.5.1",
66-
"lodash.merge": "^4.6.2",
6767
"msw": "^0.21.2",
6868
"portal-vue": "^2.1.7",
6969
"typescript": "^3.8.3",
@@ -74,7 +74,7 @@
7474
"vue-jest": "^5.0.0-alpha.4",
7575
"vue-router": "^3.4.5",
7676
"vuetify": "^2.3.10",
77-
"vuex": "^3.5.1"
77+
"vuex": "^4.0.0-beta.4"
7878
},
7979
"peerDependencies": {
8080
"vue": "^3.0",

‎src/__tests__/components/Store/store.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
export const store = {
2-
state: {
3-
count: 0,
2+
state() {
3+
return {
4+
count: 0,
5+
}
46
},
57
actions: {
68
increment: ({commit, state}) => commit('SET_COUNT', state.count + 1),

‎src/__tests__/vuex.js

+57-58
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,57 @@
1-
test.todo('Your test suite must contain at least one test.')
2-
3-
// import '@testing-library/jest-dom'
4-
// import {render, fireEvent} from '@testing-library/vue'
5-
6-
// import VuexTest from './components/Store/VuexTest'
7-
// import {store} from './components/Store/store'
8-
9-
// // A common testing pattern is to create a custom renderer for a specific test
10-
// // file. This way, common operations such as registering a Vuex store can be
11-
// // abstracted out while avoiding sharing mutable state.
12-
// //
13-
// // Tests should be completely isolated from one another.
14-
// // Read this for additional context: https://kentcdodds.com/blog/test-isolation-with-react
15-
// function renderVuexTestComponent(customStore) {
16-
// // Render the component and merge the original store and the custom one
17-
// // provided as a parameter. This way, we can alter some behaviors of the
18-
// // initial implementation.
19-
// return render(VuexTest, {store: {...store, ...customStore}})
20-
// }
21-
22-
// test('can render with vuex with defaults', async () => {
23-
// const {getByTestId, getByText} = renderVuexTestComponent()
24-
// await fireEvent.click(getByText('+'))
25-
26-
// expect(getByTestId('count-value')).toHaveTextContent('1')
27-
// })
28-
29-
// test('can render with vuex with custom initial state', async () => {
30-
// const {getByTestId, getByText} = renderVuexTestComponent({
31-
// state: {count: 3},
32-
// })
33-
// await fireEvent.click(getByText('-'))
34-
35-
// expect(getByTestId('count-value')).toHaveTextContent('2')
36-
// })
37-
38-
// test('can render with vuex with custom store', async () => {
39-
// // This is a silly store that can never be changed.
40-
// // eslint-disable-next-line no-shadow
41-
// const store = {
42-
// state: {count: 1000},
43-
// actions: {
44-
// increment: () => jest.fn(),
45-
// decrement: () => jest.fn(),
46-
// },
47-
// }
48-
49-
// // Notice how here we are not using the helper method, because there's no
50-
// // need to do that.
51-
// const {getByTestId, getByText} = render(VuexTest, {store})
52-
53-
// await fireEvent.click(getByText('+'))
54-
// expect(getByTestId('count-value')).toHaveTextContent('1000')
55-
56-
// await fireEvent.click(getByText('-'))
57-
// expect(getByTestId('count-value')).toHaveTextContent('1000')
58-
// })
1+
import '@testing-library/jest-dom'
2+
import {render, fireEvent} from '@testing-library/vue'
3+
import VuexTest from './components/Store/VuexTest'
4+
import {store} from './components/Store/store'
5+
6+
// A common testing pattern is to create a custom renderer for a specific test
7+
// file. This way, common operations such as registering a Vuex store can be
8+
// abstracted out while avoiding sharing mutable state.
9+
//
10+
// Tests should be completely isolated from one another.
11+
// Read this for additional context: https://kentcdodds.com/blog/test-isolation-with-react
12+
function renderVuexTestComponent(customStore) {
13+
// Render the component and merge the original store and the custom one
14+
// provided as a parameter. This way, we can alter some behaviors of the
15+
// initial implementation.
16+
return render(VuexTest, {store: {...store, ...customStore}})
17+
}
18+
19+
test('can render with vuex with defaults', async () => {
20+
const {getByTestId, getByText} = renderVuexTestComponent()
21+
22+
await fireEvent.click(getByText('+'))
23+
24+
expect(getByTestId('count-value')).toHaveTextContent('1')
25+
})
26+
27+
test('can render with vuex with custom initial state', async () => {
28+
const {getByTestId, getByText} = renderVuexTestComponent({
29+
state: {count: 3},
30+
})
31+
32+
await fireEvent.click(getByText('-'))
33+
34+
expect(getByTestId('count-value')).toHaveTextContent('2')
35+
})
36+
37+
test('can render with vuex with custom store', async () => {
38+
// This is a silly store that can never be changed.
39+
// eslint-disable-next-line no-shadow
40+
const store = {
41+
state: {count: 1000},
42+
actions: {
43+
increment: () => jest.fn(),
44+
decrement: () => jest.fn(),
45+
},
46+
}
47+
48+
// Notice how here we are not using the helper rendering method, because
49+
// there's no need to do that here. We're passing a whole store.
50+
const {getByTestId, getByText} = render(VuexTest, {store})
51+
52+
await fireEvent.click(getByText('+'))
53+
expect(getByTestId('count-value')).toHaveTextContent('1000')
54+
55+
await fireEvent.click(getByText('-'))
56+
expect(getByTestId('count-value')).toHaveTextContent('1000')
57+
})

‎src/vue-testing-library.js

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* eslint-disable testing-library/no-wait-for-empty-callback */
22
import {mount} from '@vue/test-utils'
3+
import merge from 'lodash.merge'
34

45
import {
56
getQueriesForElement,
@@ -26,15 +27,14 @@ function render(
2627
const container = customContainer || baseElement.appendChild(div)
2728

2829
// const localVue = createLocalVue()
29-
let vuexStore = null
3030
let router = null
3131
let additionalOptions = {}
3232

33-
// TODO: Fix VTL + Vuex (v4?)
33+
const plugins = []
34+
3435
if (store) {
35-
const Vuex = require('vuex')
36-
// localVue.use(Vuex)
37-
vuexStore = new Vuex.Store(store)
36+
const { createStore } = require('vuex')
37+
plugins.push(createStore(store))
3838
}
3939

4040
// TODO: Fix VTL + Vue-router(next?)
@@ -47,8 +47,9 @@ function render(
4747
})
4848
}
4949

50+
// Should we expose vue 3 app? if so, how?
5051
if (configurationCb && typeof configurationCb === 'function') {
51-
additionalOptions = configurationCb(vuexStore, router)
52+
additionalOptions = configurationCb(router)
5253
}
5354

5455
// If `propsData` is provided, rename it to `props`
@@ -59,14 +60,16 @@ function render(
5960
delete mountOptions.propsData
6061
}
6162

62-
const wrapper = mount(TestComponent, {
63+
const wrapper = mount(TestComponent, merge({
6364
// localVue,
6465
// router,
65-
// store: vuexStore,
6666
attachTo: container,
67+
global: {
68+
plugins
69+
},
6770
...mountOptions,
6871
...additionalOptions,
69-
})
72+
}))
7073

7174
mountedWrappers.add(wrapper)
7275

0 commit comments

Comments
 (0)