Component was still attached to body instead of element from attachTo

[JeromeDeLeon]

Version

1.0.3

Reproduction link

https://codesandbox.io/s/interesting-water-y2j31

Steps to reproduce

Run the test

What is expected?

The two logs of innerHTML of the body should have a parent of div with an id of app.

What is actually happening?

It attached the component directly in the body.

---

I don't know why the wrapper div document was getting removed just before mounting the component.

I found that createElement works just fine but if do that outside mount, it will not work.

I checked the tests made on #1492 and it was passing because it didn't check whether it was really attached on the div wrapper. It was just checking if the root is null but I don't think it's the right behavior. Correct me if I'm wrong.

[lmiller1990]

I think this is correct. It looks like appendTo will actually replace whatever you pass - kind of like new Vue({ el: '#app' }) will replace <div id="app" /> with your Vue app. appendTo should probably be named mountAt or something, but yeah. Does that make sense?

Eg I changed your test:

test("displays message", () => {
  const div = document.createElement("div");
  div.id = "root";
  const s = document.createElement('span')
  s.appendChild(div)
  document.body.appendChild(s);

  console.log(document.body.innerHTML);
  // mount() returns a wrapped Vue component we can interact with
  const wrapper = mount(MessageComponent, {
    propsData: {
      msg: "Hello world"
    },
    attachTo: "#root"
  });

  console.log(document.body.innerHTML);

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain("Hello world");
});

Logs are:

<span><div id="root"></div></span> 
<span><p>Hello world</p></span> 

[JeromeDeLeon]

😮 😮 😮 it took a minute before it made sense. Yeah. Thanks for this one.