Cannot find module 'ckeditor5' when testing with react-testing-library Next Js

[IrwanFicoFar]

i have problem on my next js testing with ckeditor,

here is my ckeditor component :

'use client'

import { CKEditor } from '@ckeditor/ckeditor5-react'

import {
  ClassicEditor,
  Italic,
  Strikethrough,
  Subscript,
  Superscript,
  Underline,
  Heading,
  Highlight,
  Indent,
  IndentBlock,
  Link,
  Paragraph,
  SpecialCharacters,
  SpecialCharactersEssentials,
  TextTransformation,
} from 'ckeditor5'

import 'ckeditor5/ckeditor5.css'

import '../styles/textEditorNotification.css'

const TextEditorForNotification = ({ strData }: { strData?: string }) => {
  return (
    <CKEditor
      editor={ClassicEditor}
      disabled={true}
      config={{
        plugins: [
          Heading,
          Highlight,
          Indent,
          IndentBlock,
          Italic,
          Link,
          Paragraph,
          Strikethrough,
          SpecialCharacters,
          SpecialCharactersEssentials,
          Subscript,
          Superscript,
          TextTransformation,
          Underline,
        ],
      }}
      data={strData}
    />
  )
}

export default TextEditorForNotification

and this is my testing :

import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'

jest.mock('@ckeditor/ckeditor5-react', () => ({
  CKEditor: ({ data }: { data: string }) => <div data-testid="mock-ckeditor">{data}</div>,
}))

import TextEditorForNotification from '../src/components/textEditorForNotification'

describe('TextEditorForNotification', () => {
  it('renders CKEditor with correct data', () => {
    const testData = '<p>Test content</p>'
    render(<TextEditorForNotification strData={testData} />)

    const mockEditor = screen.getByTestId('mock-ckeditor')
    expect(mockEditor).toHaveTextContent('Test content')
  })

  it('renders CKEditor with empty data', () => {
    render(<TextEditorForNotification />)

    const mockEditor = screen.getByTestId('mock-ckeditor')
    expect(mockEditor).toBeNull()
  })
})

error is :

i dont know why not found, becuase depencies is already exist, this only error in testing actually..

detail :

• "next": "14.1.1",
• "@ckeditor/ckeditor5-react": "^9.0.0",
• "ckeditor5": "^42.0.2"
• "@testing-library/react": "^16.0.0"
• "jest": "^29.6.2"
• npm version : 8.19.4
• node verison : 21.1.0
• os version : windows 11

[stonebk]

@IrwanFicoFar did you find a solution? I'm seeing the same issue currently.

[IrwanFicoFar]

@stonebk Not yet

[stonebk]

@IrwanFicoFar this appears to work for me:

ckeditor/ckeditor5#17289 (comment)