Is it possible to create DOM for Knockout to bind to?

Question

We're trying to figure out how to use Jest.js with Knockout.js. Essentially we want to create a small fragment of DOM such as:

<div class="card" data-bind="component: myCustomComponent"/>

Then be able to call ko.applyBindings() with a custom view model, and that DOM fragment and for Knockout to load the component up against the view model, so we can then do a Jest snapshot test.

The bit we're struggling to work out, is how can I effectively create a DOM fragment that is suited to ko.applyBindings() as it requires a DOM node which we're not sure how to create/select.

EDIT

I've played around with the answer from @user3297291 and put together the following example, which unfortunately I can't get to work. Here's my example that I've put together:

const jsdom = require("jsdom");
const ko = require("knockout");

describe("Knockout Test", () => {

    beforeAll(() => {
        ko.components.register("greeting", {
            viewModel: function(params) {
                //params.name = "test";
                //this.message = ko.observable(`Hello ${params.name}`);
                this.message = ko.observable("Hello World!");
            },
            template: '<span data-bind="text: message"/>'
        });
    });

    it("test pass", (done) => {

        jsdom.env(`<div class="wrapper"></div>`, [], (err, window) => {
            var wrapper = window.document.querySelector(".wrapper");
            var element = window.document.createElement("div");

            element.setAttribute("data-bind", 'component: "greeting"');
            wrapper.appendChild(element);

            ko.applyBindings({ name: 'Ian' }, wrapper);

            setTimeout(() => {
                console.log(element.innerHTML);
                expect(element.innerHTML).toMatchSnapshot();
                done();
            }, 10);

          }
        );
    });
});

If I modify element.setAttribute("data-bind", 'component: "greeting"'); to be element.setAttribute("data-bind", 'text: name'); then it works correctly, but loading a component (which is what I actually want to do) always seems to result in an empty element.innerHTML.

Here's a package.json if you want to reproduce, and I'm running npm run jest:

{
  "name": "kotest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "jest": "jest"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jasmine": "^2.5.3",
    "jest": "^18.1.0",
    "jsdom": "^9.9.1",
    "knockout": "^3.4.1"
  }
}

Answer 1

In a browser's javascript environment, you can test knockout virtually by creating DOM elements through code. For example, you can do this:

ko.applyBindings({}, document.createElement("div"));

This means you can write any UI test by applying a component binding to a virtual <div> and checking its contents. The example below shows some of the basics.

function testComponent(options, test) {
  var wrapper = document.createElement("div");

  // If you have a HTML string, you can do this by setting
  // wrapper.innerHTML = "<div ... ></div>";
  var binding = "component: { name: name, params: params }"
  wrapper.setAttribute("data-bind", binding);
  
  // Apply bindings to virtual element
  ko.applyBindings(options, wrapper);
  
  // Once done, call test with wrapper
  setTimeout(test.bind(wrapper));
};

var messageEditorTest = function() {
  var opts = { name: "message-editor", params: {} };
  
  testComponent(opts, function() {
    var input = this.querySelector("input"),
        display = this.querySelector("span"),
        vm = ko.dataFor(this.firstElementChild);
    
    console.log("MESSAGE EDITOR TESTS:");
    
    console.log("Has an input field:", 
                input !== null);
    
    console.log("Has a display field:",
                display !== null);
    
    console.log("Length is initially zero:",
                display.innerText === "0");
    
    vm.text("Four");
    console.log("Length reflects value input:",
                display.innerText === "4");
                
  });
};

// Component
ko.components.register('message-editor', {
    viewModel: function(params) {
        this.text = ko.observable(params && params.initialText || '');
    },
    template: 'Message: <input data-bind="value: text" /> '
            + '(length: <span data-bind="text: text().length"></span>)'
});

messageEditorTest();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Now, I'm not sure how it works if you want to test in Node.js, without the help of a browser... I think you can use a javascript DOM implementation like jsdom, or you could try firing up a "test-browser" like PhantomJS.

Edit: I ran a quick test using jsdom and everything seems to work just fine

• run npm install jsdom
• run npm install knockout

• create a file named test.js:

  var jsdom = require("jsdom");
  var ko = require("knockout");
  
  jsdom.env(
    '<div class="wrapper"></div>',
    [],
    function (err, window) {
      var wrapper = window.document.querySelector(".wrapper");
  
      var element = window.document.createElement("div");
      element.setAttribute("data-bind", "text: test");
      wrapper.appendChild(element);
  
      ko.applyBindings({ test: 'My Test' }, wrapper);
  
      console.log(element.innerHTML); // Logs "My Test"
    }
  );
  

• run node test.js
• logs My Test