vuejs / vue-test-utils

Component Test Utils for Vue 2
https://vue-test-utils.vuejs.org
MIT License
3.57k stars 669 forks source link

Config for transition stub ignored in Vue3 #1807

Closed tweichart closed 3 years ago

tweichart commented 3 years ago

Subject of the issue

I'm currently in the process of upgrading a library from Vue2 -> Vue3. One of the tests is checking components with transitions. In Vue2, transitions could be removed via config.stubs.transition = false which does not seem to work anymore in Vue3 via config.global.stubs.transition = false.

Steps to reproduce

Clean projects created via cue-cli & default configs for vue2 & 3 (with minor package additions, see package.json files)

Vue2 example (success):

import { mount, config } from '@vue/test-utils'

config.stubs.transition = false

test('empty transition', () => {
  const t = {
    render(h) {
      return h('transition',)
    }
  }
  const wrapper = mount(t)
  expect(wrapper.html()).toBe(''); // html is ''
})
Vue2 package.json ```json { "name": "vue2", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-unit-jest": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/test-utils": "^1.1.3", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {}, "overrides": [ { "files": [ "**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)" ], "env": { "jest": true } } ] }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] } ```

Vue3 example (failure):

import { h } from 'vue'
import { mount, config } from '@vue/test-utils'

config.global.stubs.transition = false

test('displays message', () => {
  const t = {
    render() {
      return h('transition',)
    }
  }
  const wrapper = mount(t)
  expect(wrapper.html()).toBe(''); // html is '<transition></transition>'
})
Vue3 package.json ```json { "name": "vue3", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-unit-jest": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/test-utils": "^2.0.0-rc.4", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "typescript": "~3.9.3", "vue-jest": "^5.0.0-0", "vue-loader-v16": "^16.0.0-beta.5.4" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {}, "overrides": [ { "files": [ "**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)" ], "env": { "jest": true } } ] }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] } ```

Expected behaviour

Both cases should return success, Vue3 should also "replace" the transition.

Actual behaviour

Vue3 example fails as it returns <transition></transition>

tweichart commented 3 years ago

moved to proper repo: https://github.com/vuejs/vue-test-utils-next/issues/471