server side tests

[fibo]

Intro

I am opening this issue to keep track of this pull request ForbesLindesay/matches-selector#1 which should solve it.

Minimal example

I am testing a Root React component which contains a component that do a new Clipbloard.

The test is something like

import React from 'react'
import reactDom from 'react-dom/server'
import dom from 'cheerio'
import Root from 'components/Root'

const render = reactDom.renderToStaticMarkup

import test from 'tape'

const noop = () => {}

const props = {
  goal: { list: [] },
  isEditing: {
    goal: false,
    postback: false
  },
  onChange: {
    goal: {}
  },
  onClick: {
    goal: {}
  },
  onClickGoal: noop,
  onClickNew: noop,
  onMount: noop
}

test('Root component', (t) => {
  const el = (
    <Root
      {...props}
    />
  )

  const $ = dom.load(render(el))
  const $h1 = $('h1')

  t.equal($h1.html(), 'My app')

  t.end()
})

Expected behaviour

Run tests server side with no error.

Actual behaviour

When I run tests server side, since Clipboard uses ForbesLindesay/matches-selector, I get this error

var proto = Element.prototype;
            ^

ReferenceError: Element is not defined

Browsers affected

None

[antonbarada]

• with angular universal

[zenorocha]

I think this is finally fixed in v1.5.14, could you please test it @fibo and @thebarada?

[fibo]

ok, thanks!

I opened an issue on a component using Clipboard.js (maybe you do not see it cause it is private), so it is in my todo list.

[zenorocha]

Awesome! I basically got rid of the dependency that caused that problem and rewrite that piece of code. Now I have control to change anything if needed.

[fibo]

here it is the issue on the private repo