为javascript测试创建HTML元素 [英] Creating HTML elements for javascript testing

问题描述

所以我有一个特殊的问题，在我的反应组件中我使用了这样的命令：

  document.getElementById（'modalsContainer ）.appendChild（recognitionProfileZoom）; 
 document.getElementById（'modalsContainer'）。appendChild（categoryZoom）; 
  

和：

 的document.getElementById（ 'cddoccategoryzoom'）值。 
  

但是我的组件中不存在由ID指定的这些元素。

如何在测试中创建这些对象？

下面的代码会使用这些元素，但它会因为它们不存在而失败（ hideModal函数利用之前的document.append ）

  describe（CaptureProfileModal functions tests，function（）{
 
 it（'should hide the modal'，function（）{
 var wrapper，instance; 
 
 wrapper = mount（
< CaptureProfileModal 
 gridAction = {1} 
 captureSettingCode = {15} 
 fields = {mockedFields} /> 
）; 
 
 wrapper.setState（{
 showModal：true 
}）; 
 
 instance = wrapper.component.getInstance（）; 
 instance.hideModal（）; 
}）; 
  

解决方案

在酶测试中创建DOM元素：

<那么大家，要在你的测试中创建 DOM 元素，它实际上非常简单，你就像你一样输入它将在vanilla javascript中使用全局关键字：

  it（'应隐藏模态'，函数（）{
 var wrapper，instance; 
 var modalsContainer = global.document.createElement（'div'）; 
 var recognitionProfileZoom = global.document.createElement（'div'）; 
 var categoryZoom = global.document.createElement（'div'）; 
 
 modalsContainer.id ='modalsContainer'; 
 recognitionProfileZoom.id ='recognitionProfileZoom'; 
 categoryZoom.id ='categoryZoom'; 
 global.document.body.appendChild（modalsContainer）; 
 global.document.body.appendChild（recognitionProfileZoom）; 
 global.document.body.appendChild（categoryZoom）; 
  

完成此操作后，您可以预期值，并正常使用DOM元素。

So i have a particular problem, inside my react component i used commands like these:

document.getElementById('modalsContainer').appendChild(recognitionProfileZoom);
document.getElementById('modalsContainer').appendChild(categoryZoom);

and:

document.getElementById('cddoccategoryzoom').value;

But these elements that were specified by ID don't exist in my component.
How would one go about creating these objects on the tests?

The code below would use these elements but it fails because they don't exist(the hideModal function utilizes the document.append from before)

describe("CaptureProfileModal functions tests", function() {

it('Should hide the modal', function() {
    var wrapper, instance;

    wrapper = mount(
        <CaptureProfileModal
            gridAction={1}
            captureSettingCode={15}
            fields={mockedFields}/>
    );

    wrapper.setState({
        showModal: true
    });

    instance = wrapper.component.getInstance();
    instance.hideModal();
});

解决方案

Creating DOM elements in your enzyme tests:

So guys, to create DOM elements in your test, it's actually really simple and you type it just as you would in vanilla javascript, with the global keyword:

it('Should hide the modal', function() {
        var wrapper, instance;
        var modalsContainer = global.document.createElement('div');
        var recognitionProfileZoom = global.document.createElement('div');
        var categoryZoom = global.document.createElement('div');

        modalsContainer.id = 'modalsContainer';
        recognitionProfileZoom.id = 'recognitionProfileZoom';
        categoryZoom.id = 'categoryZoom';
        global.document.body.appendChild(modalsContainer);
        global.document.body.appendChild(recognitionProfileZoom);
        global.document.body.appendChild(categoryZoom);  

After this is done you can expect values, and use the DOM elements normally.

这篇关于为javascript测试创建HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！