Enhance README and Jest mocks for improved testing clarity

- Updated README to specify the single mock for `@papi/backend` and its usage in Jest tests.
- Modified `web-view-inline.js` mock to return `null` instead of `undefined` for better React compliance.
- Removed redundant `@papi/backend` mock file to streamline mock management.
- Clarified comments in `interlinearizer.web-view.test.tsx` regarding the web-view module loading pattern.
- Improved type handling in `interlinearXmlParser.ts` for index and length attributes.

Author: alex-rawlings-yyc

README.md

@@ -100,7 +100,7 @@ The general file structure for an extension is as follows:
   - `*.web-view.scss` files provide styles for WebViews
   - `*.web-view.html` files are a conventional way to provide HTML WebViews (no special functionality)
   - `src/__tests__/` contains unit tests (Jest) for the extension, including parser tests and web-view tests
-- `__mocks__/` contains Jest mocks for the PAPI, file modules, and test fixtures used by tests in `src/__tests__/`
+- `__mocks__/` contains Jest mocks for the PAPI, file modules, and test fixtures used by tests in `src/__tests__/`. The single `@papi/backend` mock is `__mocks__/papi-backend.js` (Jest's `moduleNameMapper` in `jest.config.ts` points `@papi/backend` here)
 - `assets/` contains asset files the extension and its WebViews can retrieve using the `papi-extension:` protocol, as well as textual descriptions in various languages. It is copied into the build folder
   - `assets/displayData.json` contains (optionally) a path to the extension's icon file as well as text for the extension's display name, short summary, and path to the full description file
   - `assets/descriptions/` contains textual descriptions of the extension in various languages

__mocks__/@papi/backend.js

@@ -2,8 +2,12 @@
  * Jest mock for @papi/backend. Provides papi and logger so main.ts can be unit-tested without
  * loading the real Platform API.
  *
- * Main.ts uses: import papi, { logger } from '@papi/backend' With esModuleInterop, default export
- * must be the papi object; logger as named export.
+ * This is the single mock for @papi/backend. Jest's moduleNameMapper in jest.config.ts maps
+ * '^@papi/backend$' to this file; the __mocks__/@papi/backend.js location is not used so we
+ * avoid maintaining two identical mocks.
+ *
+ * Main.ts uses: import papi, { logger } from '@papi/backend'. With esModuleInterop, default
+ * export must be the papi object; logger as named export.
  */
 
 const mockRegisterWebViewProvider = jest.fn().mockResolvedValue({ dispose: jest.fn() });

__mocks__/papi-backend.js

@@ -1,9 +1,11 @@
 /**
  * Jest mock for webpack ?inline component import (interlinearizer.web-view?inline). Exports a dummy
  * function so main.ts can pass it to the WebView provider without pulling in React.
+ * Returns null so that if this mock is ever rendered as a React component, it follows React
+ * semantics (null = render nothing; undefined can trigger strict-mode warnings).
  */
 function MockWebViewComponent() {
-  return undefined;
+  return null;
 }
 
 module.exports = MockWebViewComponent;

__mocks__/web-view-inline.js

@@ -31,7 +31,13 @@ jest.mock('../parsers/interlinearXmlParser', () => {
   };
 });
 
-/** Load the web-view module; it assigns the component to globalThis.webViewComponent. */
+/**
+ * Load the web-view module; it assigns the component to globalThis.webViewComponent. This pattern
+ * is required by the Platform.Bible web-view framework: the web-view entry is built with a ?inline
+ * query and consumed by main.ts, so the component is not a normal export. Tests that need to render
+ * the component must require() the module and read globalThis. If the web-view export mechanism
+ * changes, update this test accordingly.
+ */
 require('../interlinearizer.web-view');
 
 const InterlinearizerWebView = globalThis.webViewComponent;

src/__tests__/interlinearizer.web-view.test.tsx

@@ -11,6 +11,8 @@ import type {
 // ---------------------------------------------------------------------------
 // Internal types: raw shape from fast-xml-parser with attributeNamePrefix: '@_'.
 // Public API types (InterlinearData, VerseData, etc.) live in interlinearizer.
+//
+// Style: prefer undefined and empty defaults over null in this module.
 // ---------------------------------------------------------------------------
 
 /**
@@ -124,16 +126,16 @@ function extractPunctuationsFromVerse(verseDataElement: ParsedVerseData): Punctu
     .filter((el): el is ParsedPunctuation & { Range: ParsedRange } => {
       const rangeElement = el.Range;
       if (!rangeElement) return false;
-      const indexRaw = Number(rangeElement['@_Index']);
-      const lengthRaw = Number(rangeElement['@_Length']);
-      return Number.isFinite(indexRaw) && Number.isFinite(lengthRaw);
+      const index = Number(rangeElement['@_Index']);
+      const length = Number(rangeElement['@_Length']);
+      return Number.isFinite(index) && Number.isFinite(length);
     })
     .map((el) => {
       const rangeElement = el.Range;
       return {
         TextRange: {
-          Index: rangeElement['@_Index'],
-          Length: rangeElement['@_Length'],
+          Index: Number(rangeElement['@_Index']),
+          Length: Number(rangeElement['@_Length']),
         },
         BeforeText: el.BeforeText ?? '',
         AfterText: el.AfterText ?? '',