Skip to content

Commit 490d005

Browse files
dfcookdfcook
committed
Use jest-dom for matching textContent
1 parent bfd6523 commit 490d005

File tree

11 files changed

+5334
-5254
lines changed

11 files changed

+5334
-5254
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,13 @@ npm install --save-dev vue-testing-library
9999
</template>
100100

101101
// src/TestComponent.spec.js
102+
import 'jest-dom/extend-expect'
102103
import { render } from 'vue-testing-library'
103104
import TestComponent from './TestComponent'
104105

105106
test('should render HelloWorld', () => {
106107
const { queryByTestId } = render(TestComponent)
107-
expect(queryByTestId('test1').textContent).toBe('Hello World')
108+
expect(queryByTestId('test1')).toHaveTextContent('Hello World')
108109
})
109110

110111
```

‎package.json

+90-89
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,90 @@
1-
{
2-
"name": "vue-testing-library",
3-
"version": "0.11.0",
4-
"description": "Simple and complete Vue DOM testing utilities that encourage good testing practices.",
5-
"main": "npm/index.js",
6-
"scripts": {
7-
"lint": "eslint --ext .js,.vue .",
8-
"lint:fix": "eslint --ext .js,.vue . --fix",
9-
"test": "jest --coverage",
10-
"coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls",
11-
"version": "babel src --out-dir npm"
12-
},
13-
"repository": {
14-
"type": "git",
15-
"url": "https://github.com/dfcook/vue-testing-library"
16-
},
17-
"keywords": [
18-
"vue.js",
19-
"vue.js testing",
20-
"vue",
21-
"vue testing",
22-
"vue.js 2",
23-
"vue.js 2 testing",
24-
"vue 2",
25-
"vue 2 testing"
26-
],
27-
"author": "Daniel Cook",
28-
"license": "MIT",
29-
"dependencies": {
30-
"@vue/test-utils": "^1.0.0-beta.26",
31-
"dom-testing-library": "^3.14.0",
32-
"vue": "^2.5.17",
33-
"vue-template-compiler": "^2.5.17"
34-
},
35-
"devDependencies": {
36-
"@babel/cli": "^7.2.0",
37-
"@babel/core": "^7.2.0",
38-
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
39-
"@babel/plugin-transform-runtime": "^7.2.0",
40-
"@babel/preset-env": "^7.2.0",
41-
"axios": "^0.18.0",
42-
"babel-core": "^7.0.0-bridge.0",
43-
"babel-eslint": "^10.0.1",
44-
"babel-jest": "^23.6.0",
45-
"coveralls": "^3.0.2",
46-
"eslint": "^5.9.0",
47-
"eslint-config-standard": "^12.0.0",
48-
"eslint-plugin-import": "^2.14.0",
49-
"eslint-plugin-node": "^8.0.0",
50-
"eslint-plugin-promise": "^4.0.1",
51-
"eslint-plugin-standard": "^4.0.0",
52-
"eslint-plugin-vue": "^5.0.0",
53-
"jest": "^23.6.0",
54-
"jest-in-case": "^1.0.2",
55-
"jest-serializer-vue": "^2.0.2",
56-
"vee-validate": "^2.1.4",
57-
"vue-jest": "^3.0.1",
58-
"vue-router": "^3.0.2",
59-
"vuex": "^3.0.1"
60-
},
61-
"jest": {
62-
"moduleDirectories": [
63-
"node_modules",
64-
"src"
65-
],
66-
"moduleFileExtensions": [
67-
"js",
68-
"vue"
69-
],
70-
"coverageDirectory": "./coverage",
71-
"collectCoverageFrom": [
72-
"**/src/**/*.js",
73-
"!**/tests/__tests__/**",
74-
"!**/node_modules/**"
75-
],
76-
"testPathIgnorePatterns": [
77-
"/node_modules/",
78-
"<rootDir>/npm/",
79-
"<rootDir>/tests/__tests__/components/"
80-
],
81-
"transform": {
82-
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
83-
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
84-
},
85-
"snapshotSerializers": [
86-
"<rootDir>/node_modules/jest-serializer-vue"
87-
]
88-
}
89-
}
1+
{
2+
"name": "vue-testing-library",
3+
"version": "0.11.0",
4+
"description": "Simple and complete Vue DOM testing utilities that encourage good testing practices.",
5+
"main": "npm/index.js",
6+
"scripts": {
7+
"lint": "eslint --ext .js,.vue .",
8+
"lint:fix": "eslint --ext .js,.vue . --fix",
9+
"test": "jest --coverage",
10+
"coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls",
11+
"version": "babel src --out-dir npm"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "https://github.com/dfcook/vue-testing-library"
16+
},
17+
"keywords": [
18+
"vue.js",
19+
"vue.js testing",
20+
"vue",
21+
"vue testing",
22+
"vue.js 2",
23+
"vue.js 2 testing",
24+
"vue 2",
25+
"vue 2 testing"
26+
],
27+
"author": "Daniel Cook",
28+
"license": "MIT",
29+
"dependencies": {
30+
"@vue/test-utils": "^1.0.0-beta.26",
31+
"dom-testing-library": "^3.14.0",
32+
"vue": "^2.5.17",
33+
"vue-template-compiler": "^2.5.17"
34+
},
35+
"devDependencies": {
36+
"@babel/cli": "^7.2.0",
37+
"@babel/core": "^7.2.0",
38+
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
39+
"@babel/plugin-transform-runtime": "^7.2.0",
40+
"@babel/preset-env": "^7.2.0",
41+
"axios": "^0.18.0",
42+
"babel-core": "^7.0.0-bridge.0",
43+
"babel-eslint": "^10.0.1",
44+
"babel-jest": "^23.6.0",
45+
"coveralls": "^3.0.2",
46+
"eslint": "^5.9.0",
47+
"eslint-config-standard": "^12.0.0",
48+
"eslint-plugin-import": "^2.14.0",
49+
"eslint-plugin-node": "^8.0.0",
50+
"eslint-plugin-promise": "^4.0.1",
51+
"eslint-plugin-standard": "^4.0.0",
52+
"eslint-plugin-vue": "^5.0.0",
53+
"jest": "^23.6.0",
54+
"jest-dom": "^3.0.0",
55+
"jest-in-case": "^1.0.2",
56+
"jest-serializer-vue": "^2.0.2",
57+
"vee-validate": "^2.1.4",
58+
"vue-jest": "^3.0.1",
59+
"vue-router": "^3.0.2",
60+
"vuex": "^3.0.1"
61+
},
62+
"jest": {
63+
"moduleDirectories": [
64+
"node_modules",
65+
"src"
66+
],
67+
"moduleFileExtensions": [
68+
"js",
69+
"vue"
70+
],
71+
"coverageDirectory": "./coverage",
72+
"collectCoverageFrom": [
73+
"**/src/**/*.js",
74+
"!**/tests/__tests__/**",
75+
"!**/node_modules/**"
76+
],
77+
"testPathIgnorePatterns": [
78+
"/node_modules/",
79+
"<rootDir>/npm/",
80+
"<rootDir>/tests/__tests__/components/"
81+
],
82+
"transform": {
83+
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
84+
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
85+
},
86+
"snapshotSerializers": [
87+
"<rootDir>/node_modules/jest-serializer-vue"
88+
]
89+
}
90+
}

‎tests/__tests__/__snapshots__/fetch.js.snap

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,7 @@ exports[`Fetch makes an API call and displays the greeting when load-greeting is
44
<div>
55
<button data-testid="load-greeting">
66
Fetch
7-
</button> <span data-testid="greeting-text">hello there</span></div>
7+
</button> <span data-testid="greeting-text">
8+
hello there
9+
</span></div>
810
`;

‎tests/__tests__/components/Fetch.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
</button>
88
<span
99
v-if="data"
10-
data-testid="greeting-text">{{ data.greeting }}</span>
10+
data-testid="greeting-text">
11+
{{ data.greeting }}
12+
</span>
1113
</div>
1214
</template>
1315

‎tests/__tests__/fetch.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import axiosMock from 'axios'
22
import { render, fireEvent } from '../../src'
33
import Fetch from './components/Fetch.vue'
4+
import 'jest-dom/extend-expect'
45

56
test('Fetch makes an API call and displays the greeting when load-greeting is clicked', async () => {
67
axiosMock.get.mockImplementationOnce(() =>
@@ -16,6 +17,6 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
1617

1718
expect(axiosMock.get).toHaveBeenCalledTimes(1)
1819
expect(axiosMock.get).toHaveBeenCalledWith('/greeting')
19-
expect(getByText('hello there').textContent).toBe('hello there')
20+
expect(getByText('hello there')).toHaveTextContent('hello there')
2021
expect(html()).toMatchSnapshot()
2122
})

‎tests/__tests__/number-display.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import NumberDisplay from './components/NumberDisplay.vue'
22
import { render } from '../../src'
3+
import 'jest-dom/extend-expect'
34

45
test('calling render with the same component but different props does not remount', async () => {
56
const { queryByTestId, updateProps } = render(NumberDisplay, { props: { number: 1 } })
6-
expect(queryByTestId('number-display').textContent).toBe('1')
7+
expect(queryByTestId('number-display')).toHaveTextContent('1')
78

89
await updateProps({ number: 2 })
910

10-
expect(queryByTestId('number-display').textContent).toBe('2')
11-
expect(queryByTestId('instance-id').textContent).toBe('1')
11+
expect(queryByTestId('number-display')).toHaveTextContent('2')
12+
expect(queryByTestId('instance-id')).toHaveTextContent('1')
1213
})

‎tests/__tests__/stopwatch.js

+29-28
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
1-
import StopWatch from './components/StopWatch.vue'
2-
import { render, wait, fireEvent } from '../../src'
3-
4-
test('unmounts a component', async () => {
5-
jest.spyOn(console, 'error').mockImplementation(() => {})
6-
7-
const { unmount, isUnmounted, getByText } = render(StopWatch)
8-
await fireEvent.click(getByText('Start'))
9-
10-
unmount()
11-
expect(isUnmounted()).toBe(true)
12-
13-
await wait()
14-
expect(console.error).not.toHaveBeenCalled()
15-
})
16-
17-
test('updates component state', async () => {
18-
const { getByTestId, getByText } = render(StopWatch)
19-
20-
const startButton = getByText('Start')
21-
const elapsedTime = getByTestId('elapsed')
22-
23-
expect(elapsedTime.textContent).toBe('0ms')
24-
25-
await fireEvent.click(startButton)
26-
27-
expect(elapsedTime.textContent).not.toBe('0ms')
28-
})
1+
import StopWatch from './components/StopWatch.vue'
2+
import { render, wait, fireEvent } from '../../src'
3+
import 'jest-dom/extend-expect'
4+
5+
test('unmounts a component', async () => {
6+
jest.spyOn(console, 'error').mockImplementation(() => {})
7+
8+
const { unmount, isUnmounted, getByText } = render(StopWatch)
9+
await fireEvent.click(getByText('Start'))
10+
11+
unmount()
12+
expect(isUnmounted()).toBe(true)
13+
14+
await wait()
15+
expect(console.error).not.toHaveBeenCalled()
16+
})
17+
18+
test('updates component state', async () => {
19+
const { getByTestId, getByText } = render(StopWatch)
20+
21+
const startButton = getByText('Start')
22+
const elapsedTime = getByTestId('elapsed')
23+
24+
expect(elapsedTime).toHaveTextContent('0ms')
25+
26+
await fireEvent.click(startButton)
27+
28+
expect(elapsedTime).not.toHaveTextContent('0ms')
29+
})

‎tests/__tests__/validate-plugin.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import VeeValidate from 'vee-validate'
2+
import 'jest-dom/extend-expect'
23

34
import { render, fireEvent } from '../../src'
45
import Validate from './components/Validate'
@@ -10,5 +11,5 @@ test('can validate using plugin', async () => {
1011
const usernameInput = getByPlaceholderText('Username...')
1112
await fireEvent.touch(usernameInput)
1213

13-
expect(queryByTestId('username-errors').textContent).toBe('The username field is required.')
14+
expect(queryByTestId('username-errors')).toHaveTextContent('The username field is required.')
1415
})

‎tests/__tests__/vue-router.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import 'jest-dom/extend-expect'
2+
13
import App from './components/Router/App.vue'
24
import Home from './components/Router/Home.vue'
35
import About from './components/Router/About.vue'
@@ -14,8 +16,8 @@ test('full app rendering/navigating', async () => {
1416
const { queryByTestId } = render(App, { routes })
1517

1618
// normally I'd use a data-testid, but just wanted to show this is also possible
17-
expect(queryByTestId('location-display').textContent).toBe('/')
19+
expect(queryByTestId('location-display')).toHaveTextContent('/')
1820
await fireEvent.click(queryByTestId('about-link'))
1921

20-
expect(queryByTestId('location-display').textContent).toBe('/about')
22+
expect(queryByTestId('location-display')).toHaveTextContent('/about')
2123
})

‎tests/__tests__/vuex.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import 'jest-dom/extend-expect'
2+
13
import VuexTest from './components/VuexTest'
24
import { render, fireEvent } from '../../src'
35

@@ -18,15 +20,15 @@ test('can render with vuex with defaults', async () => {
1820
const { getByTestId, getByText } = render(VuexTest, { store })
1921
await fireEvent.click(getByText('+'))
2022

21-
expect(getByTestId('count-value').textContent).toBe('1')
23+
expect(getByTestId('count-value')).toHaveTextContent('1')
2224
})
2325

2426
test('can render with vuex with custom initial state', async () => {
2527
store.state.count = 3
2628
const { getByTestId, getByText } = render(VuexTest, { store })
2729
await fireEvent.click(getByText('-'))
2830

29-
expect(getByTestId('count-value').textContent).toBe('2')
31+
expect(getByTestId('count-value')).toHaveTextContent('2')
3032
})
3133

3234
test('can render with vuex with custom store', async () => {
@@ -37,10 +39,10 @@ test('can render with vuex with custom store', async () => {
3739
const { getByTestId, getByText } = render(VuexTest, { store })
3840

3941
await fireEvent.click(getByText('+'))
40-
expect(getByTestId('count-value').textContent).toBe('1000')
42+
expect(getByTestId('count-value')).toHaveTextContent('1000')
4143

4244
await fireEvent.click(getByText('-'))
43-
expect(getByTestId('count-value').textContent).toBe('1000')
45+
expect(getByTestId('count-value')).toHaveTextContent('1000')
4446

4547
expect(console.error).toHaveBeenCalled()
4648
})

0 commit comments

Comments
 (0)