TypeError: formElement.checkValidity is not a function

I have a simple test case for my form validation.

Each input element in a form has checkValidity method that checks whether the element has any constraints and whether it satisfies them.

I use it to go through some form elements and I check their validity. A simplified example could be:

    [
      form.querySelector('input[name="day"]'),
      form.querySelector('input[name="month"]'),
      form.querySelector('input[name="year"]'),
    ].every(formElement => formElement.checkValidity())

The code above would run perfectly in all modern browsers. That is sadly not true for Enzyme - when I run tests on a component containing the code above, I get TypeError.

TypeError: formElement.checkValidity is not a function

[wojtekmaj]

For the future wanderers: workaround in #374

[goonerify]

The Jest docs suggests mocking methods which are not implemented in JSDOM. I think this is a cleaner solution than polluting your environment because of tests.

In my specific case, I needed to validate a form and then inspect the classList of the form for the presence of a certain class, the presence of which would inform me about the form’s validity.

My solution was to mock the form’s properties e.g mock the native implementation of DOMTokenList for classList property inside

beforeAll(() => {
    window.DOMTokenList = jest.fn().mockImplementation(() => {
        return {
            list: [],
            remove: jest.fn().mockImplementation(function (item) {
                const idx = this.list.indexOf(item);

                if (idx > -1) {
                    this.list.splice(idx, 1)
                }
            }),
            add: jest.fn().mockImplementation(function (item) {
                this.list.push(item);
            }),
            contains: jest.fn().mockImplementation(function (item) {
                return this.list.indexOf(item) > -1;
            })
        };
    });
})

Then I used that to pass properties to the event handler. I’m able to access the form in my react component from the submit button with event.currentTarget.form

let mockClassList = new DOMTokenList();

submitBtn.simulate('click', {
        currentTarget: {
            form: {
                checkValidity: () => false,
                classList: mockClassList
            }
        },
        preventDefault: jest.fn(),
        stopPropagation: jest.fn()
    })

This allows me to set the validity of the form to false and true, and inspect the mockClassList for the presence of the was-validated class each time

    submitBtn.simulate('click', {
        currentTarget: {
            form: {
                checkValidity: () => false,
                classList: mockClassList
            }
        },
        preventDefault: jest.fn(),
        stopPropagation: jest.fn()
    });

    expect(mockClassList.contains('was-validated')).toBeTruthy();

    submitBtn.simulate('click', {
        currentTarget: {
            form: {
                checkValidity: () => true,
                classList: mockClassList
            }
        },
        preventDefault: jest.fn(),
        stopPropagation: jest.fn()
    });

    expect(mockClassList.contains('was-validated')).toBeFalsy();

FYI: I’m using Enzyme’s shallow rendering for this, mount doesn’t seem to work with this solution. However, I’m inclined to think that the other suggestion for mocking methods which are not implemented in JSDOM, when the method is executed directly in the tested file statement might just work with mount rendering