|
1 | 1 | import 'jest-dom/extend-expect' |
2 | | - |
3 | | -import VuexTest from './components/VuexTest' |
4 | 2 | import { cleanup, render, fireEvent } from '@testing-library/vue' |
5 | 3 |
|
| 4 | +import VuexTest from './components/Store/VuexTest' |
| 5 | +import { store } from './components/Store/store' |
| 6 | + |
6 | 7 | afterEach(cleanup) |
7 | 8 |
|
8 | | -const store = { |
9 | | - state: { |
10 | | - count: 0 |
11 | | - }, |
12 | | - actions: { |
13 | | - increment: ({ commit, state }) => commit('SET_COUNT', state.count + 1), |
14 | | - decrement: ({ commit, state }) => commit('SET_COUNT', state.count - 1) |
15 | | - }, |
16 | | - mutations: { |
17 | | - SET_COUNT: (state, count) => { state.count = count } |
18 | | - } |
| 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, { |
| 20 | + store: { ...store, ...customStore } |
| 21 | + }) |
19 | 22 | } |
20 | 23 |
|
21 | 24 | test('can render with vuex with defaults', async () => { |
22 | | - const { getByTestId, getByText } = render(VuexTest,{ store }) |
| 25 | + const { getByTestId, getByText } = renderVuexTestComponent() |
23 | 26 | await fireEvent.click(getByText('+')) |
24 | 27 |
|
25 | 28 | expect(getByTestId('count-value')).toHaveTextContent('1') |
26 | 29 | }) |
27 | 30 |
|
28 | 31 | test('can render with vuex with custom initial state', async () => { |
29 | | - store.state.count = 3 |
30 | | - const { getByTestId, getByText } = render(VuexTest, { store }) |
| 32 | + const { getByTestId, getByText } = renderVuexTestComponent({ |
| 33 | + state: { count: 3 } |
| 34 | + }) |
31 | 35 | await fireEvent.click(getByText('-')) |
32 | 36 |
|
33 | 37 | expect(getByTestId('count-value')).toHaveTextContent('2') |
34 | 38 | }) |
35 | 39 |
|
36 | 40 | test('can render with vuex with custom store', async () => { |
37 | | - // this is a silly store that can never be changed |
38 | | - jest.spyOn(console, 'error').mockImplementation(() => {}) |
| 41 | + jest.spyOn(console, 'error').mockImplementation(() => { }) |
39 | 42 |
|
| 43 | + // This is a silly store that can never be changed. |
40 | 44 | const store = { state: { count: 1000 } } |
| 45 | + |
| 46 | + // Notice how here we are not using the helper method, because there's no |
| 47 | + // need to do that. |
41 | 48 | const { getByTestId, getByText } = render(VuexTest, { store }) |
42 | 49 |
|
43 | 50 | await fireEvent.click(getByText('+')) |
|
0 commit comments