How to use dom-testing-library - 10 common examples

To help you get started, we’ve selected a few dom-testing-library examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pngwn / svelte-test / src / render.js View on Github external
document.body.appendChild(target);

  const ComponentConstructor = Component.default || Component;

  const component = new ComponentConstructor({
    ...options,
    target,
  });

  mountedContainers.add({ target, component });
  return {
    component,
    target,
    // eslint-disable-next-line no-console
    debug: (el = document.body) => console.log(prettyDOM(el)),
    ...getQueriesForElement(document.body),
  };
};
github pngwn / svelte-test / test / util.js View on Github external
document.body.appendChild(target);

  let ComponentConstructor = Component.default || Component;

  const component = new ComponentConstructor({
    ...options,
    target,
  });

  mountedContainers.add({ target, component });
  return {
    component,
    target,
    // eslint-disable-next-line no-console
    debug: (el = document.body) => console.log(prettyDOM(el)),
    ...getQueriesForElement(document.body),
  };
};
github pngwn / svelte-test / src / render.js View on Github external
    debug: (el = document.body) => console.log(prettyDOM(el)),
    ...getQueriesForElement(document.body),
github pngwn / svelte-test / test / util.js View on Github external
    debug: (el = document.body) => console.log(prettyDOM(el)),
    ...getQueriesForElement(document.body),
github ZeeCoder / container-query / tests / utils / index.js View on Github external
await wait(() => {
    const textContent = getNodeText(element);
    if (textContent !== text) {
      throw new Error(
        `Text content not yet what is expected. Got: ${textContent}. Expecting: ${text}.`
      );
    } else {
      expect(textContent).toBe(text);
    }
  });
};
github ZeeCoder / container-query / tests / react / non-oocss / index.js View on Github external
beforeAll(() => {
    clearDOM();
    renderTestComponent(
      
        
          
        
      ,
      {
        width: 100,
        height: 100
      }
    );

    refs.root1 = getByTestId(document.body, "root-1");
    refs.marker1 = getByTestId(refs.root1, "marker-1");
    refs.label1 = getByTestId(refs.root1, "label-1");
    refs.child1 = getByTestId(refs.root1, "child-1");
    refs.root2 = getByTestId(document.body, "root-2");
    refs.marker2 = getByTestId(refs.root2, "marker-2");
    refs.label2 = getByTestId(refs.root2, "label-2");
    refs.child2 = getByTestId(refs.root2, "child-2");
    refs.root3 = getByTestId(document.body, "root-3");
    refs.marker3 = getByTestId(refs.root3, "marker-3");
    refs.label3 = getByTestId(refs.root3, "label-3");

    const wrapper = document.createElement("div");
    wrapper.style.width = "100px";
    wrapper.style.height = "100px";
    wrapper.style.position = "absolute";
    wrapper.style.left = "0";
github ZeeCoder / container-query / tests / react / non-oocss / index.js View on Github external
{
        width: 100,
        height: 100
      }
    );

    refs.root1 = getByTestId(document.body, "root-1");
    refs.marker1 = getByTestId(refs.root1, "marker-1");
    refs.label1 = getByTestId(refs.root1, "label-1");
    refs.child1 = getByTestId(refs.root1, "child-1");
    refs.root2 = getByTestId(document.body, "root-2");
    refs.marker2 = getByTestId(refs.root2, "marker-2");
    refs.label2 = getByTestId(refs.root2, "label-2");
    refs.child2 = getByTestId(refs.root2, "child-2");
    refs.root3 = getByTestId(document.body, "root-3");
    refs.marker3 = getByTestId(refs.root3, "marker-3");
    refs.label3 = getByTestId(refs.root3, "label-3");

    const wrapper = document.createElement("div");
    wrapper.style.width = "100px";
    wrapper.style.height = "100px";
    wrapper.style.position = "absolute";
    wrapper.style.left = "0";
    wrapper.style.bottom = "0";

    refs.unrelatedContainer = document.createElement("div");
    refs.unrelatedContainer.className = styles.container;
    wrapper.appendChild(refs.unrelatedContainer);
    refs.unrelatedMarker = document.createElement("div");
    refs.unrelatedMarker.className = styles.marker;
    wrapper.appendChild(refs.unrelatedMarker);
    refs.unrelatedChild = document.createElement("div");
github ZeeCoder / container-query / tests / react / non-oocss / index.js View on Github external
,
      {
        width: 100,
        height: 100
      }
    );

    refs.root1 = getByTestId(document.body, "root-1");
    refs.marker1 = getByTestId(refs.root1, "marker-1");
    refs.label1 = getByTestId(refs.root1, "label-1");
    refs.child1 = getByTestId(refs.root1, "child-1");
    refs.root2 = getByTestId(document.body, "root-2");
    refs.marker2 = getByTestId(refs.root2, "marker-2");
    refs.label2 = getByTestId(refs.root2, "label-2");
    refs.child2 = getByTestId(refs.root2, "child-2");
    refs.root3 = getByTestId(document.body, "root-3");
    refs.marker3 = getByTestId(refs.root3, "marker-3");
    refs.label3 = getByTestId(refs.root3, "label-3");

    const wrapper = document.createElement("div");
    wrapper.style.width = "100px";
    wrapper.style.height = "100px";
    wrapper.style.position = "absolute";
    wrapper.style.left = "0";
    wrapper.style.bottom = "0";

    refs.unrelatedContainer = document.createElement("div");
    refs.unrelatedContainer.className = styles.container;
    wrapper.appendChild(refs.unrelatedContainer);
    refs.unrelatedMarker = document.createElement("div");
    refs.unrelatedMarker.className = styles.marker;
    wrapper.appendChild(refs.unrelatedMarker);
github ZeeCoder / container-query / tests / react / non-oocss / index.js View on Github external
clearDOM();
    renderTestComponent(
      
        
          
        
      ,
      {
        width: 100,
        height: 100
      }
    );

    refs.root1 = getByTestId(document.body, "root-1");
    refs.marker1 = getByTestId(refs.root1, "marker-1");
    refs.label1 = getByTestId(refs.root1, "label-1");
    refs.child1 = getByTestId(refs.root1, "child-1");
    refs.root2 = getByTestId(document.body, "root-2");
    refs.marker2 = getByTestId(refs.root2, "marker-2");
    refs.label2 = getByTestId(refs.root2, "label-2");
    refs.child2 = getByTestId(refs.root2, "child-2");
    refs.root3 = getByTestId(document.body, "root-3");
    refs.marker3 = getByTestId(refs.root3, "marker-3");
    refs.label3 = getByTestId(refs.root3, "label-3");

    const wrapper = document.createElement("div");
    wrapper.style.width = "100px";
    wrapper.style.height = "100px";
    wrapper.style.position = "absolute";
    wrapper.style.left = "0";
    wrapper.style.bottom = "0";
github ZeeCoder / container-query / tests / react / non-oocss / index.js View on Github external
,
      {
        width: 100,
        height: 100
      }
    );

    refs.root1 = getByTestId(document.body, "root-1");
    refs.marker1 = getByTestId(refs.root1, "marker-1");
    refs.label1 = getByTestId(refs.root1, "label-1");
    refs.child1 = getByTestId(refs.root1, "child-1");
    refs.root2 = getByTestId(document.body, "root-2");
    refs.marker2 = getByTestId(refs.root2, "marker-2");
    refs.label2 = getByTestId(refs.root2, "label-2");
    refs.child2 = getByTestId(refs.root2, "child-2");
    refs.root3 = getByTestId(document.body, "root-3");
    refs.marker3 = getByTestId(refs.root3, "marker-3");
    refs.label3 = getByTestId(refs.root3, "label-3");

    const wrapper = document.createElement("div");
    wrapper.style.width = "100px";
    wrapper.style.height = "100px";
    wrapper.style.position = "absolute";
    wrapper.style.left = "0";
    wrapper.style.bottom = "0";

    refs.unrelatedContainer = document.createElement("div");
    refs.unrelatedContainer.className = styles.container;