window.TestingLibraryDom is undefined

[ryrebs]

Environment:
node v12.10.0
Package.json:

"react": "^16.8.6",
"react-dom": "^16.8.6",
"@testing-library/jest-dom": "^4.2.3",
"@testing-library/nightwatch": "^1.1.0",
"geckodriver": "^1.19.1",
"nightwatch": "^1.2.4"

Error:

[E2e/Auth/Login Test] Test Suite ================================ Running: loginButtonIsVisible
 window.TestingLibraryDom is undefined
 Error: 
{"selector":"getByText","value":["Log In"],"locatorStrategy":"getByText","name":""
at processTicksAndRejections (internal/process/task_queues.js:93:5)  FAILED: 1 errors (5.117s)

Using chrome is fine but in firefox I got this error above.

Test code:

const { getQueriesFrom } = require('@testing-library/nightwatch');

module.exports = {
  beforeEach(browser, done) {
    browser.url('http://localhost:3000');
    done();
  },

  // Smoke test
  async loginButtonIsVisible(browser) {
    const { getByText } = getQueriesFrom(browser);
    browser.pause(5000);
    const input = await getByText('Log In');
    browser.waitForElementVisible(input, 5000);
    browser.assert.visible(input);
  },
};

[doits]

Same for me, does not work with firefox but with chrome.

[benmonro]

Thanks for letting us know, PRs always welcome!

[doits]

Currently I cannot offer any support since I was just testing the library out. Just wanted to make sure this really is an issue, at least for more than one person.

But if I used it, I would try my best to provide a PR that fixes this.

[ankur-kushwaha]

I am also facing the same issue, Any update on fix?

[benmonro]

I'm no longer maintaining this project. If you make a PR I'll give you admin rights. 🙂

[CoryBond]

So I spent some time today investigating this issue. I was facing the same problems with the Testing-Dom library injection failing in Firefox in a team project. Based on the work done in testing-library/webdriverio-testing-library/issues/18 I was able to copy a workaround injection for firefox instances. This is the code segment that works:

function injectDomLib(library) {
  // add DOM Testing Library to page as a script tag to support Firefox
  if (navigator.userAgent.indexOf('Firefox') !== -1) {
    const script = document.createElement('script');
    script.innerHTML = library;
    return document.head.append(script);
  } // eval library on other browsers


  return eval(library);
}

I couldn't make a branch off of this repo (at least not one I couldn't push without seeing a 403 issue) so I made a fork instead with my work:
https://github.com/CoryBond/nightwatch-testing-library

I also tested out my solution in my other testing repo:
https://github.com/CoryBond/nightwatch-website-tests

I have not tested this extensively in other browsers except chrome but I suspect thanks to the line:

  if (navigator.userAgent.indexOf('Firefox') !== -1) {

Other browsers are not effected by this new custom injection

---

As mentioned in testing-library/webdriverio-testing-library/issues/18 if there is a better solution to injecting the dom script then adding a script element to the dom we should use that instead.

It's still not clear why firefox is not executing the internal UMD script but its likely due to some firefox security check. Maybe this is configurable? Not sure, but this might be a good solution until someone finds a better workaround.