Formik + happy-dom = 💔

Problem

I was trying to test simple authentication form.

The stack was: React, Vite, Vitest, happy-dom.

I don’t know why, but formik inputs weren’t reacting on userEvent.type, userEvent.click methods.

Formik form didn’t submit.

There is not much info if you just try to google the issue.

Problem seemed to be with userEvent, because with fireEvent it was partially working. But in guides userEvent seemed to be working fine!

Solution

The root of issue was in happy-dom package, which can be selected as an environment option for Vitest.

So, moving from:

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
 
// https://vitejs.dev/config/
export default defineConfig({
  base: '',
  plugins: [react()],
  test: {
    globals: true,
    environment: 'happy-dom',
    setupFiles: './src/test/setup.js',
  },
})

to:

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
 
// https://vitejs.dev/config/
export default defineConfig({
  base: '',
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.js',
  },
})

has solved the issue.