enzyme: element.focus() not setting document.activeElement

@ljharb thanks for the response, I think you’re right but enzyme API plays a role in this issue as well. to fix a failing test document.activeElement === inputDOMNode thx to https://github.com/ant-design/ant-design/pull/21185

is to add { attachTo: document.body }

  const wrapper = mount(<input type="text" />, { attachTo: document.body });

In case it can help someone, this is what I did in our project:

In Jest setup file:

Note: In case you are testing NodeJS with the same Jest setup, you have to divide it by client and server and add this code only in the client as on server you won’t have access to document and it will be throwing errors.

// setupJest.client.js

/**
 * In order to attach a mounted component to a div element we have to create
 * and remove an element from the node before and after each test.
 */
let container: HTMLDivElement | null;

beforeEach(() => {
  container = document.createElement("div");
  container.id = "enzymeContainer";
  document.body.appendChild(container);
});

afterEach(() => {
  if (container && container.parentNode) {
    container.parentNode.removeChild(container);
  }

  container = null;
});

Then I created a custom wrapper for mounting, using Enzyme mount, like so:

// jest/containers.ts

import { mount as enzymeMount } from "enzyme";

export const mount = (component: ReactNode) =>
  enzymeMount(component, {
    attachTo: document.getElementById("enzymeContainer")
  });

Usage:

// exampleTest.ts

import { mount } from "./jest/containers.ts";

describe('', () => {
  it('should focus', () => {
    ele = mount(<button>Hi</button>);
    ele.focus();
    expect(document.activeElement).toBe(ele.getDOMNode());
  });
});

This approach works very well, and we are using it with around 4k of tests, without any issues. The only drawback with this is that you can have only one mounting per test, so be aware of it.

I am happy to provide more details should you need it.

For now, I’ve build myself a simple function like this:

/**
 * If you want to have your element to be attached to `document.body`
 * (which is needed for example when you want to test focusing by referencing `document.activeElement`),
 * use this to build a container element
 * that can be later passed to the `mount()` function as `attachTo` param.
 *
 * Usage:
 * ```tsx
 * describe('Button', () => {
 *   const attachTo = buildMountAttachTarget();
 *
 *   it('works', () => {
 *     const output = mount(<Button />, {
 *       attachTo,
 *     });
 *   });
 * });
 * ```
 */
export function buildMountAttachTarget() {
  let container: HTMLDivElement;

  beforeEach(() => {
    container = document.createElement('div');
    document.body.append(container);
  });

  afterEach(() => {
    document.body.removeChild(container!);
  });

  return container!;
}

However it would be very nice to have that built-in in the Enzyme library. (Honestly, I think I wrote something similar to it for the 3rd time already, each time in a different project.)

Thread necromancy but I thiiink this might be an issue in enzyme after all.

That enzyme can be used to work around a jsdom issue doesn’t change the source of the issue 😃

Doing a bit of investigation, I think jsdom has gotten stricter and more in-line with what browsers do between v14 and v16 that Jest v25 uses. I think jsdom is in the right here - it matches browser behaviour, and that enzyme will need to mount elements slightly differently if it wants to have document.activeElement be set.

Consider the following JSBin: https://jsbin.com/tuqonikavu/edit?js,console,output

It shows that in a browser:

• document.activeElement DOES get set if the element you call .focus() on is attached to the body element (present on the page? not sure of the right term for this)
• document.activeElement DOES NOT get set if the element you call is created but not attached to the body

Looking at the react adaptor it looks like the element that you create to mount an element onto by default is global.document.createElement('div'); which isn’t attached to the body element.

That sounds like the current enzyme behaviour using jsdom v16 given the “default” behaviour and @vire’s workaround using attachTo matches the behaviour of browsers.

To get this working out-the-box I think Enzyme will want to mount attach content somewhere under the document.body instead of on an unattached div.

JSDOM is in full control of how .focus() works; enzyme (or jest) has nothing to do with it.

The implication is that this changed in JSDOM v15; I’d suggest investigating their changelog.

Yeah, I know this. But I’m sure we could have a separate package that everybody using both enzyme and jest could use. (Nowadays it seems like 90% of community is using jest; ignoring that would be ignoring that community.)

Should I file such feature requests against other repository (or create my own)? Or should I file it here?

I mean, we could have such helpers living at https://github.com/enzymejs/enzyme/tree/master/packages/enzyme-jest-helpers , for example. I could help developing that a bit.

Yep that’ll solve the issue in userland. However I get the feeling that this is going to trip a lot of folks up.

Personally, the team I’m on has written several tests that help ensure accessibility - that focus is moved to a particular element at a given element at a point in time, and I did not expect these to require modifications after a jsdom update. I expected that when I mounted elements that they’d be mounted within the body of a document and thus focus changing would work like when I have visible elements within a browser - do my manual checking with elements attached to a body I would have thought my automated tests would work in the same way by default.

I think we want to encourage people to write tests around focus management, and making it so they have to add attachTo and then clean up after themselves will disincentive people from doing that. I wonder if it possible to change Enzyme’s default behaviour (i.e. it should attach elements onto the body) to make writing these tests as lean as possible.

Low-effort userland solution:

This is subtly buggy - if the expect check fails then then ele is never unmounted and we won’t be working off a clean slate for future tests, which may lead to cascading failures in unrelated tests which will be hard to debug. This is a footgun waiting to happen IMO.

it('should focus', () => {
  const ele = mount(<button>Hi</button>, { attachTo: document.body });
  ele.focus();
  expect(document.activeElement).toBe(ele.getDOMNode());
  // Clean up
  ele.unmount();
});

Bulletproof userland solution:

This fixes the “expect failures will cause leakages into other tests” problem but it is a lot more boilerplate. I’d wager most people won’t be aware of this subtlety and go for the lower-effort solution mentioned above

describe('my thing', () => {
  let ele;

  afterAll(() => {
    ele && ele.unmount();
  })

  it('should focus', () => {
    ele = mount(<button>Hi</button>, { attachTo: document.body });
    ele.focus();
    expect(document.activeElement).toBe(ele.getDOMNode());
  });
})

Ideal end state, this currently does not work because mount does not attach things to the body by default:

it('should focus', () => {
  const ele = mount(<button>Hi</button>);
  ele.focus();
  expect(document.activeElement).toBe(ele.getDOMNode());
});

thank you for this! just had the very same issue.

That enzyme can be used to work around a jsdom issue doesn’t change the source of the issue 😃