test: add vitest-fetch-mock

.eslintrc.json

@@ -16,6 +16,7 @@
  },
  "rules": {
  "react/prop-types": "off",
- "react/display-name": "off"
+ "react/display-name": "off",
+ "react/react-in-jsx-scope": 0
  }
 }

package.json

@@ -84,6 +84,7 @@
  "storybook": "^8.1.5",
  "typescript": "^5.4.5",
  "vitest": "^1.6.0",
+ "vitest-fetch-mock": "^0.2.2",
  "webpack": "^5.91.0"
  },
  "peerDependencies": {

src/__tests__/index.test.tsx

@@ -1,11 +1,10 @@
 import { render, screen } from "@testing-library/react";
-import React from "react";
 import DocViewer from "../index";
 
-import csvFile from "../exampleFiles/csv-file.csv";
-import pdfFile from "../exampleFiles/pdf-file.pdf";
-import gifFile from "../exampleFiles/gif-image.gif";
-import pngFile from "../exampleFiles/png-image.png";
+import csvFile from "../exampleFiles/csv-file.csv?url";
+import pdfFile from "../exampleFiles/pdf-file.pdf?url";
+import gifFile from "../exampleFiles/gif-image.gif?url";
+import pngFile from "../exampleFiles/png-image.png?url";
 
 test("renders component with no documents", () => {
  render(<DocViewer documents={[]} />);

vite.config.ts

@@ -4,8 +4,8 @@ import dsv from "@rollup/plugin-dsv";
 export default defineConfig({
  plugins: [dsv()],
  test: {
- environment: "happy-dom",
  globals: true,
+ environment: "happy-dom",
  setupFiles: ["./vitest.setup.ts"],
  },
 });

vitest.setup.ts

@@ -1,2 +1,7 @@
 import "@testing-library/jest-dom";
 import "core-js/proposals/promise-with-resolvers";
+import createFetchMock from "vitest-fetch-mock";
+import { vi } from "vitest";
+
+const fetchMocker = createFetchMock(vi);
+fetchMocker.enableMocks();