fix(warn): warn when RouterView is wrapped with transition

diff --git a/__tests__/RouterView.spec.ts b/__tests__/RouterView.spec.ts
index 80a66f49bcc1d32c9fe716a5d422bc6aa58e6d2e..b7805d371156054d9304712874c49568b6daf7f0 100644 (file)
--- a/__tests__/RouterView.spec.ts
+++ b/__tests__/RouterView.spec.ts
@@ -293,6 +293,89 @@ describe('RouterView', () => {
     expect(wrapper.html()).toBe(`<div>id:2;other:page</div>`)
   })
 
+  describe('warnings', () => {
+    it('does not warn RouterView is wrapped', async () => {
+      const route = createMockedRoute(routes.root)
+      const wrapper = await mount(
+        {
+          template: `
+        <div>
+          <router-view/>
+        </div>
+        `,
+        },
+        {
+          propsData: {},
+          provide: route.provides,
+          components: { RouterView },
+        }
+      )
+      expect(wrapper.html()).toBe(`<div><div>Home</div></div>`)
+      expect('can no longer be used directly inside').not.toHaveBeenWarned()
+    })
+    it('warns if KeepAlive wraps a RouterView', async () => {
+      const route = createMockedRoute(routes.root)
+      const wrapper = await mount(
+        {
+          template: `
+        <keep-alive>
+          <router-view/>
+        </keep-alive>
+        `,
+        },
+        {
+          propsData: {},
+          provide: route.provides,
+          components: { RouterView },
+        }
+      )
+      expect(wrapper.html()).toBe(`<div>Home</div>`)
+      expect('can no longer be used directly inside').toHaveBeenWarned()
+    })
+
+    it('warns if KeepAlive and Transition wrap a RouterView', async () => {
+      const route = createMockedRoute(routes.root)
+      const wrapper = await mount(
+        {
+          template: `
+        <transition>
+          <keep-alive>
+            <router-view/>
+          </keep-alive>
+        </transition>
+        `,
+        },
+        {
+          propsData: {},
+          provide: route.provides,
+          components: { RouterView },
+        }
+      )
+      expect(wrapper.html()).toBe(`<div>Home</div>`)
+      expect('can no longer be used directly inside').toHaveBeenWarned()
+    })
+
+    it('warns if Transition wraps a RouterView', async () => {
+      const route = createMockedRoute(routes.root)
+      const wrapper = await mount(
+        {
+          template: `
+        <transition>
+          <router-view/>
+        </transition>
+        `,
+        },
+        {
+          propsData: {},
+          provide: route.provides,
+          components: { RouterView },
+        }
+      )
+      expect(wrapper.html()).toBe(`<div>Home</div>`)
+      expect('can no longer be used directly inside').toHaveBeenWarned()
+    })
+  })
+
   describe('KeepAlive', () => {
     async function factory(
       initialRoute: RouteLocationNormalizedLoose,

diff --git a/src/RouterView.ts b/src/RouterView.ts
index a4e816b6b7f4aababffc612cb616415c60b51a3f..74ed892d18a81cfbe1456385fd067956fe0fad87 100644 (file)
--- a/src/RouterView.ts
+++ b/src/RouterView.ts
@@ -115,7 +115,10 @@ export const RouterView = (RouterViewImpl as any) as {
 function warnDeprecatedUsage() {
   const instance = getCurrentInstance()!
   const parentName = instance.parent && instance.parent.type.name
-  if (parentName === 'KeepAlive' || parentName === 'Transition') {
+  if (
+    parentName &&
+    (parentName === 'KeepAlive' || parentName.includes('Transition'))
+  ) {
     const comp = parentName === 'KeepAlive' ? 'keep-alive' : 'transition'
     warn(
       `<router-view> can no longer be used directly inside <transition> or <keep-alive>.\n` +