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

beforeEach(() => {
      isFirefox.mockReturnValue(false)
      jest.spyOn(console, 'error')
      console.error.mockImplementation(() => {}) // eslint-disable-line no-console
      render(`
        <form id="blah" method="get" action="/kaki.html">
            <input type="text">
            <button>asdfsd</button>
            <button style="display:none" type="submit">sub</button>
        </form>
      `)
      inputElement = window.document.querySelector('form input')
      recorder.attach()
      fireEvent.focus(inputElement)
      fireEvent.input(inputElement, { target: { value: 'blah' } })
    })

debug: (el = baseElement) =>
      Array.isArray(el)
        ? // eslint-disable-next-line no-console
          el.forEach(e => console.log(prettyDOM(e)))
        : // eslint-disable-next-line no-console,
          console.log(prettyDOM(el)),
    unmount: () => ReactDOM.unmountComponentAtNode(container),

          el.forEach(e => console.log(prettyDOM(e)))
        : // eslint-disable-next-line no-console,

async type(element, text, userOpts = {}) {
    if (element.disabled) return;
    const defaultOpts = {
      allAtOnce: false,
      delay: 0
    };
    const opts = Object.assign(defaultOpts, userOpts);
    if (opts.allAtOnce) {
      if (element.readOnly) return;
      fireEvent.input(element, { target: { value: text } });
    } else {
      let actuallyTyped = "";
      for (let index = 0; index < text.length; index++) {
        const char = text[index];
        const key = char; // TODO: check if this also valid for characters with diacritic markers e.g. úé etc
        const keyCode = char.charCodeAt(0);

        if (opts.delay > 0) await wait(opts.delay);

        const downEvent = fireEvent.keyDown(element, {
          key: key,
          keyCode: keyCode,
          which: keyCode
        });
        if (downEvent) {
          const pressEvent = fireEvent.keyPress(element, {

beforeEach(() => {
      isFirefox.mockReturnValue(false)
      jest.spyOn(console, 'error')
      console.error.mockImplementation(() => {}) // eslint-disable-line no-console
      render(`
        <form id="blah" method="get" action="/kaki.html">
            <input type="text">
            <button>asdfsd</button>
            <button style="display:none" type="submit">sub</button>
        </form>
      `)
      inputElement = window.document.querySelector('form input')
      recorder.attach()
      fireEvent.focus(inputElement)
      fireEvent.input(inputElement, { target: { value: 'blah' } })
    })

test.serial('render acknowledgeInterest email to person', async t => {
  const props = {
    send: true, // when true email is actually sent
    from: t.context.me,
    op: t.context.op
  }
  const html = await emailPerson('acknowledgeInterest', t.context.to, props, true)
  const document = (new JSDOM(html)).window.document
  t.truthy(getByText(document, 'Help make a difference'))
  t.truthy(getByText(document, t.context.op.name))
  t.truthy(getByText(document, `Kia ora ${t.context.to.nickname},`))
})

test.serial('render acknowledgeInterest email to person', async t => {
  const props = {
    send: true, // when true email is actually sent
    from: t.context.me,
    op: t.context.op
  }
  const html = await emailPerson('acknowledgeInterest', t.context.to, props, true)
  const document = (new JSDOM(html)).window.document
  t.truthy(getByText(document, 'Help make a difference'))
  t.truthy(getByText(document, t.context.op.name))
  t.truthy(getByText(document, `Kia ora ${t.context.to.nickname},`))
})

test.serial('render acknowledgeInterest email to person', async t => {
  const props = {
    send: true, // when true email is actually sent
    from: t.context.me,
    op: t.context.op
  }
  const html = await emailPerson('acknowledgeInterest', t.context.to, props, true)
  const document = (new JSDOM(html)).window.document
  t.truthy(getByText(document, 'Help make a difference'))
  t.truthy(getByText(document, t.context.op.name))
  t.truthy(getByText(document, `Kia ora ${t.context.to.nickname},`))
})

// Intentionally do not return anything to avoid unnecessarily complicating the API.
      // folks can use all the same utilities we return in the first place that are bound to
      // the container
    },
    asFragment: () => {
      if (typeof document.createRange === 'function') {
        return document
          .createRange()
          .createContextualFragment(container.innerHTML)
      }

      const template = document.createElement('template')
      template.innerHTML = container.innerHTML
      return template.content
    },
    ...dtl.getQueriesForElement(baseElement, queries)
  }
}

// eslint-disable-next-line no-new
      const newComponent = new ComponentConstructor({
        ...options,
        target
      })

      containerCache.set(container, { target, newComponent })
      componentCache.add(newComponent)

      newComponent.$$.on_destroy.push(() => { componentCache.delete(newComponent) })
    },
    unmount: () => {
      if (componentCache.has(component)) component.$destroy()
    },
    ...getQueriesForElement(container, queries)
  }
}