From c00fe776c28fd72c344487a4f9084f31ecee25cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Tue, 7 Mar 2023 08:44:33 +0100 Subject: [PATCH 1/2] feat: Bump DOM Testing Library and minimum required version for node (#301) * Bump node and DTL versions * Update other deps * Update readme to reflect 5.x supports Vue 2 * Update links to point to 5.x --- .github/workflows/validate.yml | 2 +- README.md | 37 ++++++++++------------ package.json | 41 +++++++++++++------------ src/__tests__/about-vue-router-mocha.js | 1 + src/__tests__/fetch-axios-mock.js | 8 ++--- src/__tests__/hello-world-debug.js | 4 +-- types/test.ts | 2 +- 7 files changed, 45 insertions(+), 50 deletions(-) diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml index fb224957..5cfb6db0 100644 --- a/.github/workflows/validate.yml +++ b/.github/workflows/validate.yml @@ -17,7 +17,7 @@ jobs: main: strategy: matrix: - node: [12, 14, 16] + node: [14, 16] runs-on: ubuntu-latest steps: - name: ⬇️ Checkout repo diff --git a/README.md b/README.md index d37f3b78..3e760053 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,11 @@
-

Vue Testing Library

+

Vue Testing Library for Vue 2

+ +
+ +

Vue Testing Library support Vue 2 in its 5.x version range. This means that any version bump within the 5.x range may include breaking changes.

+ +

If you're looking for the Vue 3 version of Vue Testing Library, check out the main branch.


@@ -15,11 +21,6 @@

Simple and complete Vue.js testing utilities that encourage good testing practices.

Vue Testing Library is a lightweight adapter built on top of DOM Testing Library and @vue/test-utils.

- - -
- -

If you're looking for the Vue 3 version of Vue Testing Library, check out the next branch.


@@ -66,17 +67,11 @@ This module is distributed via `npm` and should be installed as one of your project's `devDependencies`: -If using Vue 2 ``` npm install --save-dev @testing-library/vue@5 ``` -If using Vue 3 -``` -npm install --save-dev @testing-library/vue -``` - -This library has `peerDependencies` listings for `Vue` and +This library has `peerDependencies` listings for `Vue v2` and `vue-template-compiler`. You may also be interested in installing `@testing-library/jest-dom` so you can @@ -258,7 +253,7 @@ instead of filing an issue on GitHub. [npm-badge]: https://badge.fury.io/js/%40testing-library%2Fvue.svg [npm]: https://badge.fury.io/js/%40testing-library%2Fvue [license-badge]: https://img.shields.io/github/license/testing-library/vue-testing-library.svg -[license]: https://github.com/testing-library/vue-testing-library/blob/main/LICENSE +[license]: https://github.com/testing-library/vue-testing-library/blob/5.x/LICENSE [discord]: https://discord.gg/testing-library [discord-badge]: https://img.shields.io/discord/723559267868737556.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=flat-square [jest-dom]: https://github.com/testing-library/jest-dom @@ -274,11 +269,11 @@ instead of filing an issue on GitHub. [add-issue-bug]: https://github.com/testing-library/vue-testing-library/issues/new?assignees=&labels=bug&template=bug_report.md&title= [add-issue]: (https://github.com/testing-library/vue-testing-library/issues/new) -[types-directory]: https://github.com/testing-library/vue-testing-library/blob/main/types -[test-directory]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__ -[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vuex.js -[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vue-router.js -[vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/validate-plugin.js -[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/translations-vue-i18n.js -[vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vuetify.js +[types-directory]: https://github.com/testing-library/vue-testing-library/blob/5.x/types +[test-directory]: https://github.com/testing-library/vue-testing-library/blob/5.x/src/__tests__ +[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/5.x/src/__tests__/vuex.js +[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/5.x/src/__tests__/vue-router.js +[vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/5.x/src/__tests__/validate-plugin.js +[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/5.x/src/__tests__/translations-vue-i18n.js +[vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/5.x/src/__tests__/vuetify.js diff --git a/package.json b/package.json index d085611c..f8456e9e 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,11 @@ "test": "kcd-scripts test", "test:update": "npm test -- --updateSnapshot --coverage", "validate": "kcd-scripts validate", - "typecheck": "dtslint ./types/", + "typecheck": "kcd-scripts typecheck --build types", "setup": "npm install && npm run validate -s" }, "engines": { - "node": ">10.18" + "node": ">=14" }, "files": [ "types/*.d.ts", @@ -43,32 +43,33 @@ "author": "Daniel Cook", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^7.26.6", - "@vue/test-utils": "^1.1.0" + "@babel/runtime": "^7.21.0", + "@testing-library/dom": "^9.0.0", + "@vue/test-utils": "^1.3.0" }, "devDependencies": { - "@babel/plugin-transform-runtime": "^7.11.5", - "@testing-library/jest-dom": "^5.11.6", - "@testing-library/user-event": "^12.1.10", - "@types/estree": "0.0.46", - "@vue/vue2-jest": "^27.0.0-alpha.2", + "@babel/plugin-transform-runtime": "^7.21.0", + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/user-event": "^12", + "@types/estree": "1.0.0", + "@vue/vue2-jest": "^29.2.3", "apollo-boost": "^0.4.9", "apollo-cache-inmemory": "^1.6.6", - "axios": "^0.21.1", - "dtslint": "^4.0.5", - "eslint": "^7.13.0", - "eslint-plugin-vue": "^7.6.0", + "axios": "^1.3.4", + "dtslint": "^4.2.1", + "eslint": "^8.35.0", + "eslint-plugin-vue": "^9.9.0", "graphql": "^15.3.0", - "graphql-tag": "^2.11.0", - "isomorphic-unfetch": "^3.0.0", - "jest-serializer-vue": "^2.0.2", - "kcd-scripts": "^11.1.0", + "graphql-tag": "^2.12.6", + "isomorphic-unfetch": "^3.0.2", + "jest-serializer-vue": "^3.1.0", + "kcd-scripts": "^13.0.0", "lodash.merge": "^4.6.2", - "msw": "^0.35.0", + "msw": "^1.1", "portal-vue": "^2.1.7", "semver": "^7.3.5", - "typescript": "^4.0.5", + "tslint": "^6.1.3", + "typescript": "^4.9", "vee-validate": "^2.2.15", "vue": "^2.6.12", "vue-apollo": "^3.0.4", diff --git a/src/__tests__/about-vue-router-mocha.js b/src/__tests__/about-vue-router-mocha.js index 1ed2673b..c7eb8a2d 100644 --- a/src/__tests__/about-vue-router-mocha.js +++ b/src/__tests__/about-vue-router-mocha.js @@ -1,3 +1,4 @@ +/* eslint-disable jest/no-conditional-in-test */ import '@testing-library/jest-dom' import {render} from '@testing-library/vue' import semver from 'semver' diff --git a/src/__tests__/fetch-axios-mock.js b/src/__tests__/fetch-axios-mock.js index 39e51bab..af963314 100644 --- a/src/__tests__/fetch-axios-mock.js +++ b/src/__tests__/fetch-axios-mock.js @@ -4,11 +4,9 @@ import {render, fireEvent} from '@testing-library/vue' import Component from './components/Fetch.vue' test('mocks an API call when load-greeting is clicked', async () => { - axiosMock.get.mockImplementationOnce(() => - Promise.resolve({ - data: {greeting: 'hello there'}, - }), - ) + axiosMock.get.mockResolvedValueOnce({ + data: {greeting: 'hello there'}, + }) const {html, getByText} = render(Component, {props: {url: '/greeting'}}) diff --git a/src/__tests__/hello-world-debug.js b/src/__tests__/hello-world-debug.js index c17d4cd2..32f156b8 100644 --- a/src/__tests__/hello-world-debug.js +++ b/src/__tests__/hello-world-debug.js @@ -1,4 +1,4 @@ -/* eslint-disable testing-library/no-debug */ +/* eslint-disable testing-library/no-debugging-utils */ import {render} from '@testing-library/vue' import HelloWorld from './components/HelloWorld' @@ -67,7 +67,7 @@ test('allows same arguments as prettyDOM', () => { expect(console.log).toHaveBeenCalledTimes(1) expect(console.log.mock.calls[0]).toMatchInlineSnapshot(` - Array [ + [
..., ] diff --git a/types/test.ts b/types/test.ts index f749e4c7..6adb0632 100644 --- a/types/test.ts +++ b/types/test.ts @@ -165,7 +165,7 @@ export function testInstantiatedRouter() { eslint testing-library/prefer-explicit-assert: "off", testing-library/no-wait-for-empty-callback: "off", - testing-library/no-debug: "off", + testing-library/no-debugging-utils: "off", testing-library/prefer-screen-queries: "off", @typescript-eslint/unbound-method: "off", */ From dede1996241133e8a75aebb27c02bd70c55c54fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Tue, 7 Mar 2023 09:01:31 +0100 Subject: [PATCH 2/2] fix: Update workflow to release 5.x --- .github/workflows/validate.yml | 12 +++++++----- src/__tests__/about-vue-router-mocha.js | 18 ++++++++++-------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml index 5cfb6db0..4caf22af 100644 --- a/.github/workflows/validate.yml +++ b/.github/workflows/validate.yml @@ -4,6 +4,7 @@ on: branches: [ '+([0-9])?(.{+([0-9]),x}).x', + '5.x', 'main', 'next', 'next-major', @@ -44,16 +45,16 @@ jobs: runs-on: ubuntu-latest if: ${{ github.repository == 'testing-library/vue-testing-library' && - contains('refs/heads/main,refs/heads/beta,refs/heads/next,refs/heads/alpha', + contains('refs/heads/main,refs/heads/beta,refs/heads/next,refs/heads/alpha,refs/heads/5.x', github.ref) && github.event_name == 'push' }} steps: - name: ⬇️ Checkout repo - uses: actions/checkout@v2 + uses: actions/checkout@v3 - name: ⎔ Setup node - uses: actions/setup-node@v2 + uses: actions/setup-node@v3 with: - node-version: 14 + node-version: 16 - name: 📥 Download deps uses: bahmutov/npm-install@v1 @@ -64,12 +65,13 @@ jobs: run: npm run build - name: 🚀 Release - uses: cycjimmy/semantic-release-action@v2 + uses: cycjimmy/semantic-release-action@v3 with: semantic_version: 17 branches: | [ '+([0-9])?(.{+([0-9]),x}).x', + '5.x', 'main', 'next', 'next-major', diff --git a/src/__tests__/about-vue-router-mocha.js b/src/__tests__/about-vue-router-mocha.js index c7eb8a2d..9f42cf54 100644 --- a/src/__tests__/about-vue-router-mocha.js +++ b/src/__tests__/about-vue-router-mocha.js @@ -1,22 +1,24 @@ /* eslint-disable jest/no-conditional-in-test */ +/* eslint-disable jest/no-conditional-expect */ + import '@testing-library/jest-dom' import {render} from '@testing-library/vue' -import semver from 'semver' import About from './components/Router/About.vue' const routes = [] test('uses require("vue-router").default when require("vue-router") is undefined (useful for mocha users)', () => { + expect.assertions(2) + // Test for fix https://github.com/testing-library/vue-testing-library/issues/119 jest.mock('vue-router', () => { return undefined }) - expect(() => render(About, {routes})).toThrowError( - new TypeError( - semver.gte(process.version, '16.0.0') - ? "Cannot read properties of undefined (reading 'default')" - : "Cannot read property 'default' of undefined", - ), - ) + try { + render(About, {routes}) + } catch (error) { + expect(error).toBeInstanceOf(TypeError) + expect(error.message).toEqual(expect.stringContaining('default')) + } })

AltStyle によって変換されたページ (->オリジナル) /