是否可以为 Knockout 创建 DOM 以绑定到？

Question

我们正在尝试弄清楚如何将Jest.js 与Knockout.js 结合使用。本质上，我们想要创建一个小的 DOM 片段，例如：

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

然后可以使用自定义视图模型调用ko.applyBindings()，并使用该 DOM 片段并让 Knockout 将组件加载到视图模型上，这样我们就可以进行 Jest 快照测试。

我们正在努力解决的问题是，我如何有效地创建一个适合 ko.applyBindings() 的 DOM 片段，因为它需要一个我们不确定如何创建/选择的 DOM 节点。

编辑

我已经尝试过@user3297291 的答案，并整理了以下示例，不幸的是我无法开始工作。这是我整理的示例：

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);

          }
        );
    });
});

如果我将element.setAttribute("data-bind", 'component: "greeting"'); 修改为element.setAttribute("data-bind", 'text: name');，那么它可以正常工作，但是加载一个组件（这是我真正想要做的）似乎总是导致一个空的element.innerHTML。

如果你想重现，这里有一个 package.json，我正在运行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

在浏览器的 javascript 环境中，您可以通过代码创建 DOM 元素来虚拟测试淘汰赛。例如，您可以这样做：

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

这意味着您可以通过将组件绑定应用到虚拟 <div> 并检查其内容来编写任何 UI 测试。下面的示例显示了一些基础知识。

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>

现在，如果您想在没有浏览器帮助的情况下在 Node.js 中进行测试，我不确定它是如何工作的……我认为您可以使用像 @ 这样的 javascript DOM 实现987654321@，或者您可以尝试启动“测试浏览器”，例如PhantomJS。

编辑：我使用 jsdom 进行了快速测试，一切似乎都正常

• 运行npm install jsdom
• 运行npm install knockout

• 创建一个名为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"
    }
  );
  

• 运行node test.js
• 日志My Test