fix: update Loader component test IDs and change test environment to jsdom

Common/Tests/UI/Components/Loader.test.tsx

@@ -14,7 +14,7 @@ describe("Loader tests", () => {
         loaderType={LoaderType.Bar}
       />,
     );
-    const barLoader: HTMLElement = screen.getByRole("bar-loader");
+    const barLoader: HTMLElement = screen.getByTestId("bar-loader");
     expect(barLoader).toBeInTheDocument();
   });
   test("it should render if beats loader show up", () => {
@@ -25,7 +25,7 @@ describe("Loader tests", () => {
         loaderType={LoaderType.Beats}
       />,
     );
-    const beatLoader: HTMLElement = screen.getByRole("beat-loader");
+    const beatLoader: HTMLElement = screen.getByTestId("beat-loader");
     expect(beatLoader).toBeInTheDocument();
   });
 });

Common/UI/Components/Loader/Loader.tsx

@@ -25,9 +25,9 @@ const Loader: FunctionComponent<ComponentProps> = ({
   if (loaderType === LoaderType.Bar) {
     return (
       <div
-        role={`bar-loader mt-1 ${className}`}
-        className="flex justify-center"
-        data-testid="loader"
+        role="presentation"
+        className={`flex justify-center mt-1 ${className}`.trim()}
+        data-testid="bar-loader"
       >
         <BarLoader height={4} width={size} color={color.toString()} />
       </div>
@@ -37,9 +37,9 @@ const Loader: FunctionComponent<ComponentProps> = ({
   if (loaderType === LoaderType.Beats) {
     return (
       <div
-        role="beat-loader mt-1"
-        className="justify-center"
-        data-testid="loader"
+        role="presentation"
+        className={`justify-center mt-1 ${className}`.trim()}
+        data-testid="beat-loader"
       >
         <BeatLoader size={size} color={color.toString()} />
       </div>

Common/jest.config.json

@@ -26,7 +26,7 @@
     "transform": {
         ".(ts|tsx)": "ts-jest"
     },
-    "testEnvironment": "node",
+    "testEnvironment": "jsdom",
     "collectCoverage": false,
     "coverageReporters": [
         "text",