CKEditor5 Jest Testing - TypeError: Cannot read properties of null (reading 'model')

[jiefugong]

Hi,

I'm using the CKEditor5 React Component with one of the ready-to-use editor builds -- specifically, the ClassicEditor. I've installed both of these using yarn in my local project and have code that is 100% identical to the example given on this quick start page

So far, using the editor itself has been fine in my application. However, when I attempt to write Jest tests for this component I get the following error:

TypeError: Cannot read properties of null (reading 'model')
    at model (@ckeditor/ckeditor5-react/dist/webpack:/CKEditor/node_modules/@ckeditor/ckeditor5-watchdog/src/editorwatchdog.js:241:12)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

My Jest test is incredibly simple:

describe('TextEditor', () => {
  it('renders successfully', () => {
    expect(() => {
      render(<TextEditor />)
    }).not.toThrow()
  })
})

I've seen some separate issues filed for general wonkiness of using Jest with CKEditor 5 though most of the time it's looked like an issue with either a custom build and some faulty webpack configuration. I'm not sure if this falls into the same category since it appears to involve the watchdog specifically

[Aerophite]

I also have this issue. Does anyone have any insight into how to fix it?

@jiefugong
If you revert back to 5.0.2 then you won't get the error. The error started in 5.0.3 and is still present in 5.0.5 (current latest).

[Aerophite]

@jiefugong

This appears to be fixed in version 5.0.6

[pomek]

Sounds good. @jiefugong, could you confirm?

[alexcoliveira1]

I currently have that same error, running on v5.0.6, started right after I upgraded from v5.0.2.

[2-fly-4-ai]

Have this same issue working in next.js. I'm not running any tests, just using the editor like normal. Everything works fine, saves to the db but I can't stop this error from popping afterwards.

"The config.initialData option cannot be used together with initial data passed as the first parameter of Editor.create()."

[roonie007]

Any news on this ?

[kyrofa]

I get both of these errors (in v6) when testing in jest when I render the component containing the editor, and then change some prop in the test that causes a re-render without the editor (e.g. let's say I change a "show" prop to "hide", which conditionally doesn't render the editor). If that happens fast enough, it makes the ckeditor react component try to tear itself down before it has completely rendered, which makes the domContainer null while trying to create the editor. That causes the "The config.initialData option cannot be used together with initial data" error, and since the editor didn't fire up properly, you get the "Cannot read properties of null (reading 'model')" when destroying the watchdog. Can't even catch that error with error boundaries since it's async.

I'd say the fix is to write that async and watchdog code a bit more defensively.

[kyrofa]

Any chance someone experiencing this could take #383 for a spin? It solves my problem, but I'm not completely sure they are the same problem :) .

[AliaksandrBortnik]

#370 seems related as well. All about the same destroy watchdog.