[Electron]プリロードに書いた処理をレンダラープロセスから呼べない

前提

現在、Electronの初歩を学習中です。
メインプロセス、レンダラープロセス間通信の機能を作ってみたく、
複数の参考サイトを巡りサンプルコードを参照しながら作成しています。
構成としては現状は以下の状態です。

メインプロセス（main.js）
プリロードプロセス（preload.js）※main.jsと同階層
レンダラープロセス（testpage.html, testpage.js）

実現したいこと

レンダラープロセスからメインプロセスに定義されている処理を呼び出し、処理結果を受け取る
- 将来的にはSQLを発行するAPIを用意してデータベースの参照・更新を行いたい

発生している問題・エラーメッセージ

レンダラープロセスからpreload.jsに記述している処理を呼ぶ箇所で、処理が見つからない。

▼起動したElectronアプリのDeveloper Tools Consoleに表示される内容

Uncaught TypeError: Cannot read properties of undefined (reading 'testMsg')
    at HTMLDocument.<anonymous> (testpage.js:3:27)
    at e (jquery-3.5.1.slim.min.js:2:30211)
    at t (jquery-3.5.1.slim.min.js:2:30513)

該当のソースコード

▼main.js
※path.join(__dirname, 'preload.js') の参照先は誤りが無いことを確認済

JavaScript
1const {app, BrowserWindow, ipcMain} = require('electron');
2const path = require('path');
3
4function createWindow () {
5    // mainWindow を作成
6    let mainWindow = new BrowserWindow({
7        width: 992,
8        height: 800,
9        webPrefences: {
10            preload: path.join(__dirname, 'preload.js') 
11        }
12    });
13
14    // html を指定
15    mainWindow.loadFile('test-project/html/testpage.html');
16}
17
18// Electronの初期化完了後に、ウィンドウ生成関数を実行
19app.whenReady().then(createWindow);
20
21// 全てのウィンドウが閉じたら終了
22app.on('window-all-closed', () => {
23    if (process.platform !== 'darwin') {
24        app.quit()
25    }
26})
27
28// Electronの初期化完了後に実行
29app.on('ready', () => {
30    console.log("System Start.");
31})
32
33ipcMain.handle('test_msg', async () => {
34    return("[debug]プロセス間通信");  // この処理をレンダラーから呼び出したい
35});

▼preload.js

JavaScript
1const { contextBridge, ipcRenderer } = require('electron')
2
3contextBridge.exposeInMainWorld('testApi', {
4    testMsg : () => ipcRenderer.invoke('test_msg'),
5})

▼testpage.js

JavaScript
1$(function(){
2  console.log("debugMessage"); //ココまではDeveloperToolのConsoleに表示されている
3  let msg = window.testApi.testMsg(); //エラー発生箇所
4  console.log(msg);
5});