test: migrate to vitest and upgrade react-pdf

package.json

@@ -3,9 +3,12 @@
  "version": "1.15.1",
  "description": "File viewer for React.",
  "author": "Matthew Mogford / Damian Cyntler",
+ "type": "module",
  "keywords": [
  "reactjs",
- "file-viewer"
+ "react-library",
+ "file-viewer",
+ "doc-viewer"
  ],
  "license": "Apache License 2.0",
  "homepage": "https://cyntler.github.io/react-doc-viewer",
@@ -18,67 +21,69 @@
  "main": "./dist/cjs/index.js",
  "module": "./dist/esm/index.js",
  "types": "./dist/esm/index.d.ts",
- "engines": {
- "node": ">=12.0.0"
- },
  "scripts": {
  "start": "storybook dev -p 6006",
  "build": "rm -rf dist && npm run build:esm && npm run build:cjs",
  "build:esm": "tsc --noEmit false",
  "build:cjs": "tsc --noEmit false --module commonjs --moduleResolution node --outDir ./dist/cjs",
- "test": "react-scripts test --watchAll=false",
+ "test": "vitest run",
+ "lint": "eslint ./src --ext .ts,.tsx",
  "prettier:check": "prettier --check .",
  "prettier:fix": "prettier --write .",
  "build-storybook": "storybook build",
  "deploy": "npm run build-storybook && gh-pages -d storybook-static",
- "release": "npm run prettier:check && npm run test && npm run build && release-it && npm run deploy"
+ "release": "npm run prettier:check && npm run lint && npm run test && npm run build && release-it && npm run deploy"
  },
  "dependencies": {
  "@types/mustache": "^4.2.5",
  "@types/papaparse": "^5.3.14",
- "ajv": "^7",
+ "ajv": "^7.2.4",
  "mustache": "^4.2.0",
  "papaparse": "^5.4.1",
- "react-pdf": "latest",
+ "react-pdf": "^9.0.0",
  "styled-components": "^6.1.11"
  },
  "devDependencies": {
- "@babel/core": "^7.24.5",
+ "@babel/core": "^7.24.6",
  "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
- "@babel/preset-env": "^7.24.5",
- "@babel/preset-react": "^7.24.1",
- "@babel/preset-typescript": "^7.24.1",
- "@storybook/addon-actions": "^7.6.19",
- "@storybook/addon-essentials": "^7.6.19",
- "@storybook/addon-interactions": "^7.6.19",
- "@storybook/addon-links": "^7.6.19",
- "@storybook/react": "^7.6.19",
- "@storybook/react-webpack5": "^7.6.19",
+ "@babel/preset-env": "^7.24.6",
+ "@babel/preset-react": "^7.24.6",
+ "@babel/preset-typescript": "^7.24.6",
+ "@rollup/plugin-dsv": "^3.0.4",
+ "@storybook/addon-actions": "^8.1.4",
+ "@storybook/addon-essentials": "^8.1.4",
+ "@storybook/addon-interactions": "^8.1.4",
+ "@storybook/addon-links": "^8.1.4",
+ "@storybook/react": "^8.1.4",
+ "@storybook/react-webpack5": "^8.1.4",
  "@storybook/testing-library": "^0.2.2",
  "@testing-library/jest-dom": "^6.4.5",
  "@testing-library/react": "^15.0.7",
  "@testing-library/user-event": "^14.5.2",
  "@types/jest": "^29.5.12",
- "@types/node": "^20.12.11",
- "@types/react": "^18.3.2",
+ "@types/node": "^20.12.13",
+ "@types/react": "^18.3.3",
  "@types/react-dom": "^18.3.0",
  "@types/react-router-dom": "^5.3.3",
  "@types/styled-components": "^5.1.34",
- "@typescript-eslint/eslint-plugin": "^7.8.0",
- "@typescript-eslint/parser": "^7.8.0",
+ "@typescript-eslint/eslint-plugin": "^7.11.0",
+ "@typescript-eslint/parser": "^7.11.0",
  "babel-loader": "^9.1.3",
+ "core-js": "^3.37.1",
+ "eslint": "^8.57.0",
+ "eslint-plugin-react": "^7.34.2",
+ "eslint-plugin-react-hooks": "^4.6.2",
  "eslint-plugin-storybook": "^0.8.0",
  "file-loader": "^6.2.0",
  "gh-pages": "^6.1.1",
- "jest": "^29.7.0",
+ "happy-dom": "^14.12.0",
  "prettier": "^3.2.5",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
- "react-scripts": "^5.0.1",
- "release-it": "^17.2.1",
- "storybook": "^7.6.19",
- "ts-jest": "^29.1.2",
+ "release-it": "^17.3.0",
+ "storybook": "^8.1.4",
  "typescript": "^5.4.5",
+ "vitest": "^1.6.0",
  "webpack": "^5.91.0"
  },
  "peerDependencies": {

src/__tests__/index.test.tsx

@@ -2,9 +2,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 epsFile from "../exampleFiles/eps-file.eps";
 
 test("renders component with no documents", () => {
  render(<DocViewer documents={[]} />);
@@ -13,15 +14,21 @@ test("renders component with no documents", () => {
 });
 
 test("renders component with documents", () => {
- const docs = [{ uri: pdfFile }, { uri: pngFile }];
+ const docs = [
+ { uri: pdfFile },
+ { uri: pngFile },
+ { uri: csvFile },
+ { uri: gifFile },
+ ];
+
  render(<DocViewer documents={docs} />);
 
  expect(screen.getByTestId("react-doc-viewer")).toBeDefined();
  expect(screen.getByText(`Document 1 of ${docs.length}`)).toBeDefined();
 });
 
 test("renders component with unsupported file type", () => {
- const docs = [{ uri: epsFile, fileType: "application/postscript" }];
+ const docs = [{ uri: "", fileType: "application/postscript" }];
  render(<DocViewer documents={docs} />);
 
  expect(screen.getByTestId("react-doc-viewer")).toBeDefined();

src/declaration.file.d.ts

@@ -1,6 +1,8 @@
 declare module "*.png";
 declare module "*.pdf";
+declare module "*.gif";
 declare module "*.csv";
 declare module "*.eps";
+declare module "*.webp";
 
 declare module "react-csv-to-table";

src/hooks/useDocumentLoader.ts

@@ -13,6 +13,7 @@ import {
  FileLoaderFuncProps,
 } from "../utils/fileLoaders";
 import { useRendererSelector } from "./useRendererSelector";
+import { isValidHttpUrl } from "../utils/isValidHttpUrl";
 
 /**
  * Custom Hook for loading the current document into context
@@ -31,8 +32,12 @@ export const useDocumentLoader = (): {
 
  useEffect(
  () => {
- if (!currentDocument) return;
- if (currentDocument.fileType !== undefined) return;
+ if (
+ !currentDocument ||
+ currentDocument.fileType !== undefined ||
+ !isValidHttpUrl(documentURI)
+ )
+ return;
 
  const controller = new AbortController();
  const { signal } = controller;

src/utils/isValidHttpUrl.ts

@@ -0,0 +1,11 @@
+export const isValidHttpUrl = (str: string) => {
+ let url;
+
+ try {
+ url = new URL(str);
+ } catch (_) {
+ return false;
+ }
+
+ return url.protocol === "http:" || url.protocol === "https:";
+};

tsconfig.json

@@ -2,17 +2,18 @@
  "compilerOptions": {
  "outDir": "./dist/esm",
  "target": "ES6",
- "module": "NodeNext",
+ "module": "ES6",
  "lib": ["dom", "dom.iterable", "esnext"],
  "declaration": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "strict": true,
  "forceConsistentCasingInFileNames": true,
- "moduleResolution": "NodeNext",
+ "moduleResolution": "Bundler",
  "resolveJsonModule": true,
  "jsx": "react-jsx",
  "noEmit": true,
- "skipLibCheck": false
+ "skipLibCheck": false,
+ "types": ["vitest/globals"]
  }
 }

vitest.config.ts

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

vitest.setup.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+import "core-js/proposals/promise-with-resolvers";