attachTo not working on mount with Vue Test Utils

Hey folks. I’m pretty new to Vue Test Utils, using Jest, and have hit a snag.

I’ve got a few tests working, but had issues with getting a form to submit when the submit button is clicked. I found this Stack Overflow post on the topic, and tried the answer there, but it didn’t work for me for some reason.

I then went and looked at the attachTo documentation, and copied that code into my test, but this also fails. I’ve spent almost a whole day looking into this, and can’t for the life of me work out why using the code from the docs is failing for me.

I must be doing something wrong, the code is an exact copy paste so I doubt it’s that unless the docs are faulty, so I’d think it must be a config issue?

I set up Vue Test Utils using vue-cli, so haven’t much insight into the config of it.

Here’s the code I’m running:

import { mount } from "@vue/test-utils";

describe("Register: PersonalForm", () => {
  it("should find the form DOM element", async () => {
    let div = document.createElement("div");
    div.id = "root";
    document.body.appendChild(div);

    const Component = {
      template: "<div>ABC</div>",
    };
    let wrapper = mount(Component, {
      attachTo: document.getElementById("root"),
    });

    console.log("wrapper.vm.$el.parentNode", wrapper.vm.$el.parentNode);
    expect(wrapper.vm.$el.parentNode).to.not.be.null;
    wrapper.destroy();
  });
});

The output of that is:

 FAIL  tests/unit/views/Auth/Register/PersonalForm.spec.js
  Register: PersonalForm
    ✕ should find the form DOM element (10ms)

  ● Register: PersonalForm › should find the form DOM element

    TypeError: Cannot read property 'not' of undefined

      21 |
      22 |     console.log("wrapper.vm.$el.parentNode", wrapper.vm.$el.parentNode);
    > 23 |     expect(wrapper.vm.$el.parentNode).to.not.be.null;
         |     ^
      24 |     wrapper.destroy();
      25 |   });
      26 | });

      at Object.<anonymous> (tests/unit/views/Auth/Register/PersonalForm.spec.js:23:5)

  console.log tests/unit/views/Auth/Register/PersonalForm.spec.js:22
    wrapper.vm.$el.parentNode null

I’ve tried using await Vue.$nextTick() and flushing promises with flush-promises, but nothing seems to work.

Anyone have any idea what I might be missing, or where to look? Appreciate your time.

Looks like the code example in Vue Test Utils documentation is either wrong or is not using Jest, but the problem here is that
expect(wrapper.vm.$el.parentNode).to.not.be.null;
should be
expect(wrapper.vm.$el.parentNode).not.toBeNull();