Need to create testing codes using react vitest config for the following class code:

Syllable.ts $($Model$)$

export class Syllable $\{$

public content: string;

public row: number;

public column: number;

constructor$($content: string, row: number, column: number$)\{$

this.content $=$ content;

this.row $=$ row;

this.column $=$ column;

$\}$

$\}$

Puzzle Class $($Model$)$:

$$The puzzle class will manage the state of the puzzle board, swaps, and scoring.

import $\{$ Syllable $\}$ from $\text{'}./$Syllable$\text{'}$;

export class Puzzle $\{$

public board: Syllable$[][]$;

public swaps: number;

public score: number;

private originalConfig: Syllable$[][]$;

constructor$($initialConfig: Syllable$[][])\{$

this.board $=$ initialConfig;

this.swaps $=0$;

this.score $=0$;

this.originalConfig $=$ JSON.parse$($JSON$.$stringify$($initialConfig$))$; $//$ Save the initial configuration

$\}$

$//$ Swaps two syllables based on their positions

swapSyllables$($row$1$: number, col$1$: number, row$2$: number, col$2$: number$)$: void $\{$

const temp $=$ this.board$[$row$1][$col$1]$;

this.board$[$row$1][$col$1]=$ this.board$[$row$2][$col$2]$;

this.board$[$row$2][$col$2]=$ temp;

this.swaps$++$;

this.updateScore$()$;

$\}$

$//$ Resets the board to its initial configuration

reset$()$: void $\{$

this.board $=$ JSON.parse$($JSON$.$stringify$($this$.$originalConfig$))$;

this.swaps $=0$;

this.score $=0$;

$\}$

$//$ Updates score based on how many correct syllables are in the correct place

updateScore$()$: void $\{$

let newScore $=0$;

for $($let row $=0$; row $<$ this.board.length; row$++)\{$

for $($let col $=0$; col $<$ this.board$[$row$].$length; col$++)\{$

if $($this$.$board$[$row$][$col$].$content $===$ this.originalConfig$[$row$][$col$].$content$)\{$

newScore$++$;

$\}$

$\}$

$\}$

this.score $=$ newScore;

$\}$

$\}$

PuzzleController.ts

import $\{$ Puzzle $\}$ from $\text{'}../$models$/$Puzzle$\text{'}$;

import $\{$ Syllable $\}$ from $\text{'}../$models$/$Syllable$\text{'}$;

export class PuzzleController $\{$

private puzzle: Puzzle;

constructor$($puzzle: Puzzle$)\{$

this.puzzle $=$ puzzle;

$\}$

handleSwap$($row$1$: number, col$1$: number, row$2$: number, col$2$: number$)$: void $\{$

this.puzzle.swapSyllables$($row$1,$ col$1,$ row$2,$ col$2)$;

$\}$

handleReset$()$: void $\{$

this.puzzle.reset$()$;

$\}$

getPuzzleState$()$: Syllable$[][]\{$

return this.puzzle.board;

$\}$

getScore$()$: number $\{$

return this.puzzle.score;

$\}$

getSwaps$()$: number $\{$

return this.puzzle.swaps;

$\}$

$\}$

Puzzle.tsx $($Component$)$

import React, $\{$ useState $\}$ from 'react';

import $\{$ PuzzleController $\}$ from $\text{'}../$utils$/$PuzzleController$\text{'}$;

import $\{$ Syllable $\}$ from $\text{'}../$models$/$Syllable$\text{'}$;

interface PuzzleProps $\{$

initialConfig: Syllable$[][]$;

$\}$

const Puzzle: React.FC $=(\{$ initialConfig $\})=>\{$

const $[$puzzleController$,$ setPuzzleController$]=$ useState$($new PuzzleController$($new Puzzle$($initialConfig$)))$;

const $[$selected$,$ setSelected$]=$ useState$<\{$ row: number, col: number $\}|$ null$>($null$)$;

const handleSyllableClick $=($row: number, col: number$)=>\{$

if $($selected$)\{$

puzzleController.handleSwap$($selected$.$row, selected.col, row, col$)$;

setSelected$($null$)$; $//$ Reset selection after swap

$\}$ else $\{$

setSelected$(\{$ row, col $\})$; $//$ Select first syllable

$\}$

$\}$;

const handleReset $=()=>\{$

puzzleController.handleReset$()$;

setSelected$($null$)$;

$\}$;

const board $=$ puzzleController.getPuzzleState$()$;

return $($

Swaps: $\{$puzzleController$.$getSwaps$()\}$Score: $\{$puzzleController$.$getScore$()\}$Swaps: $\{$puzzleController$.$getSwaps$()\}$Score: $\{$puzzleController$.$getScore$()\}$Swaps: $\{$puzzleController$.$getSwaps$()\}$Score: $\{$puzzleController$.$getScore$()\}$