PharosLoadingSpinner: TypeError: this._spinner.animate is not a function error in unit tests with TypeScript Vue

[michael-iden]

Expected behavior
animate is understood to be a function for the spinner and tests pass locally. Alternatively we have setup our application to avoid alerting on this type error altogether.

Or maybe theres something else we should be doing with our typescript/pharos/Vue setup that is more correct

Actual behavior
When running tests locally, mocking the pharos-loading-spinner appears to prevent the error from appearing. Running jest --config ./jest.config.js --ci --reporters=default --reporters=jest-junit --runInBand in GitLab under both node 18 and 20, we get the error TypeError: this._spinner.animate is not a function and prevents the build from proceeding

Steps to reproduce the issue

1. Use JSDOM to bootstrap our components
2. Also initialize the components in the jest-env.ts

Screenshots or code

// jest.config.js

module.exports = {
  testEnvironment: "jsdom",
  testEnvironmentOptions: {
    customExportConditions: ["node", "node-addons"],
  },
  collectCoverage: true,
  collectCoverageFrom: [
    "<rootDir>/src/**",
    "!**/__snapshots__/**",
    "!**/sandbox/**",
    "!<rootDir>/src/shim.d.ts",
  ],
  coverageReporters: ["text", "text-summary"], // Prints coverage report to console instead of saving reports locally
  coverageThreshold: {
    global: {
      lines: 0,
      branches: 0,
      functions: 0,
      statements: 0,
    },
  },
  coverageProvider: "v8",
  testMatch: ["<rootDir>/src/**/*.spec.ts"],
  setupFilesAfterEnv: ["<rootDir>/jest-env.ts"],
  moduleFileExtensions: ["js", "ts", "json", "vue"],
  transform: {
    "^.+\\.(ts|js)$": ["ts-jest", { isolatedModules: true }],
    "^.+\\.vue?$": "@vue/vue3-jest",
  },
  transformIgnorePatterns: [
    "<rootDir>/node_modules/(?!@ithaka|@lit|lit|lit-element|lit-html|@open-wc)",
  ],
  globals: {
    "vue-jest": {
      compilerOptions: {
        isCustomElement: (tag) => tag.startsWith(`mfe-personal-uploads-pharos-`),
      },
    },
  },
};

// jest-env.ts

import "@ithaka/pharos/lib/patches/jsdom";
import("./src/initComponents");

const mockIntersectionObserver = class {
  observe = jest.fn();
  unobserve = jest.fn();
  disconnect = jest.fn();
};

Object.defineProperty(window, "ResizeObserver", {
  value: mockIntersectionObserver,
});

global.URL.createObjectURL = jest.fn(() => "test-image-url");

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "useDefineForClassFields": true,
    "noImplicitThis": true,
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "allowJs": true
  },
  "exclude": [
    "playwright",
  ]
}

Pharos version
Pharos 13.4

Your environment

• OS: macOS node18, node 20. Node 18/node20 docker image built with --platform=linux/amd64
• Browser: N/A
• Version: N/A

Additional information