diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts index bf0f8fcc9..58c24a7ab 100644 --- a/src/vueWrapper.ts +++ b/src/vueWrapper.ts @@ -79,7 +79,12 @@ export class VueWrapper { } html() { - return this.parentElement.innerHTML + // cover cases like , multiple root nodes. + if (this.parentElement['__vue_app__']) { + return this.parentElement.innerHTML + } + + return this.element.outerHTML } text() { diff --git a/tests/findComponent.spec.ts b/tests/findComponent.spec.ts index a1d95fab4..818d175a7 100644 --- a/tests/findComponent.spec.ts +++ b/tests/findComponent.spec.ts @@ -170,4 +170,60 @@ describe('findComponent', () => { const wrapper = mount(compA) expect(wrapper.findComponent(Hello).unmount).toThrowError() }) + + // https://github.com/vuejs/vue-test-utils-next/issues/173 + const ComponentA = { + name: 'ComponentA', + template: `
` + } + + const ComponentB = { + name: 'ComponentB', + template: '
' + } + + it('finds nested components and obtains expected html and innerText', () => { + const wrapper = mount({ + components: { + ComponentA, + ComponentB + }, + template: ` + + 1 + 2 + 3 + + ` + }) + const com1 = wrapper.findComponent(ComponentB) + expect(com1.html()).toBe('
1
') + }) + + it('finds nested components and obtains expected html and innerText', () => { + const wrapper = mount({ + components: { + ComponentA, + ComponentB + }, + template: ` + + +
1
+
+ +
2
+
+ +
3
+
+
+ ` + }) + + const compB = wrapper.findAllComponents(ComponentB) + expect(compB[0].find('.content').text()).toBe('1') + expect(compB[0].vm.$el.querySelector('.content').innerHTML).toBe('1') + expect(compB[0].vm.$el.querySelector('.content').textContent).toBe('1') + }) }) diff --git a/tests/html.spec.ts b/tests/html.spec.ts index 382a2112a..57e5335ed 100644 --- a/tests/html.spec.ts +++ b/tests/html.spec.ts @@ -50,4 +50,33 @@ describe('html', () => { const wrapper = mount(Component) expect(wrapper.html()).toEqual('
FOO
') }) + + it('returns the html with findComponent in a nested Suspense component', () => { + const Foo = defineComponent({ + template: '
FOO
', + setup() { + return {} + } + }) + const Component = { + template: ` +
+ + + + + + + +
`, + components: { Foo } + } + const wrapper = mount(Component) + const foo = wrapper.findComponent(Foo) + expect(foo.html()).toEqual('
FOO
') + }) })