Search code examples
tinymcetinymce-4

TinyMCE v4 testing with Jest not returning Editor instance


I am attempting to write some tests in Jest that require the use of TinyMCE. I am getting back what seems to be a valid tinymce object (since tinymce.majorVersion displays 4) but when I perform tinymce.editors[0] I get undefined.

This is my js/Jest code:

describe('My Test', () => {
    var editor = null;
    var BODY = 'editor-body';

    var tinyMceSettings = {
        elements = BODY,
        plugins  = 'myplugin',
        init_instance_callback: function(editor) {
            editor.setContent(Utils.HTML);
        };
    };
    tinymce.init(tinyMceSettings);
    editor = tinymce.get(BODY);
    // tinymce.majorVersion prints '4'
    // tinymce.editors[0] gives me undefined
});

My Utils.js file contains some HTML to testwith:

const HTML = 
    "<div id='editor-body' class='editor-body-parts'>" +
        "<p data-type='header'>" +
            "<span class='element'>TIME</span>" +
            "<span class='element'>PERSON</span>" +
            "<span class='element'>ADDRESS</span>" +
       "</p> + 
    "</div>";

Any help would be great.


Solution

  • Jest is not a "proper" browser so TinyMCE likely won't actually initialize against it. I would suspect that the init() call is simply not working due to that and while the global tinymce variable exists simply by loading the TinyMCE script the editors[] array would be empty unless a proper init() completes.