ReferenceError: FormData is not defined

[ShaktiMandal]

Describe the bug

Recently, In one of my vue3 project we have migrated vue-cli to vite. With vite, we are using jest for testing the component. After the migration, application run without any issue but I have started encountering below issue whenever running jest.

Reference Error: FormData is not defined (latest version - 1.1.3).

Please note that, I have started observing this error from version - 1.0..0.
Unfortunately, I wouldn't be able to share the code to reproduce the issue as its my client code. However, below is the high level structure.

We have the axios call in package which return response. Below is the code snippet causing the error.

import axios from "axios";
const instance = axios.create(); // this line is causing problem. If I comment out this line, issue disappear.

After some digging in axios code, it looks like source of the error is from lib/platform/browser/classes/ index

To Reproduce

No response

Code snippet

No response

Expected behavior

No response

Axios Version

1.0.0

Adapter Version

No response

Browser

chrome

Browser Version

No response

Node.js Version

above 14.19.0

OS

No response

Additional Library Versions

vue - 3.2.39
Jest - 29.2.2
Vite - 3.1.3

Additional context/Screenshots

As I have tried to debug both jest and axios, what I have noticed is that issue occurs at the time of loading the dependency modules it self. Due to that, test case does not even execute.

[Romick2005]

Seems like your runtime environment does not have/support FormData. Try to investigate this with window.FormData or global.FormData that depends on environment. Maybe this can help, but you need to provide some reproducible example, and only then someone can help you.

[ShaktiMandal]

Yeah, I agree that I should have something reproducible. I am trying in my local to replicate same if I can. I will go through the ref you have provided and see if anything positive comes out. :-)

[Parthiv-01]

Seems like you runtime environment does not have/support FormData. Try to investigate this with window.FormData or global.FormData depends on environment. Maybe this can #4412 (comment), but you need to provide some reproducible example, and only then someone can help you.

[ShaktiMandal]

Seems like your runtime environment does not have/support FormData. Try to investigate this with window.FormData or global.FormData that depends on environment. Maybe this can help, but you need to provide some reproducible example, and only then someone can help you.

@Romick2005

I am trying to reproduce the issue, so have created a small package to test , below is the code. Now, I am facing some kind of wired issue when trying to import axios. Have looked about the issue but does not seems to have exact root cause. Please let me know if you have any thought on this.

Error/Warning -

Line, throws error -

const axios_1 = __importDefault(require("axios")); // this is line give the warning which causing the issue I believe.

Code

https://github.com/ShaktiMandal/axios-fetch-api.git (axios - 1.0.0)

[Romick2005]

What is the actual problem do you have?

[ShaktiMandal]

@Romick2005 - actually I was trying to use this package in my code where I was Importing MakeAPICall from this package. Anyway, I found the solution for the original problem - ReferenceError: FormData is not defined.

[ShaktiMandal]

Seems like your runtime environment does not have/support FormData. Try to investigate this with window.FormData or global.FormData that depends on environment. Maybe this can help, but you need to provide some reproducible example, and only then someone can help you.

After doing some investigation, Came to know that main problem was due the testEnvironment i was using in Jest. Previously, I was using happy-dom /jest-environment and which cause the error. Issue got resolved after replacing it with jsdom.
As per the docs, happy-dom /jest-environment does not support the FormData completely which might lead to this issue I believe.

Just to summarize the solution if it help others.

Please note, this might be one of the solution if encounter this issue. There could be other reasons which can cause same kind problem.

Solution :

1. Change the testEnviroment - other (happy-dom /jest-environment) -> JSDOM in jest.config.js
2. Install jsdom package if not installed.
3. Install jest-environment-jsdom.

[ShaktiMandal]

Closing the issue as it has been resolved. please refer to my previous comment for the solution if you encounter this issue.