Testing projects that import model-viewer

[jmiller-83]

I have a React-based web app that was created with create-react-app. I'm able to make use of the <model-viewer> component within the app with the import statement `import @google/model-viewer", and 3D models are displayed as expected. However, when I try to do any unit testing with jest, I get errors caused by the above import statement, for example:

  Test suite failed to run

    TypeError: rel attribute has no supported tokens

      at DOMTokenListImpl._validationSteps (node_modules/jsdom/lib/jsdom/living/nodes/DOMTokenList-impl.js:62:13)
      at DOMTokenListImpl.supports (node_modules/jsdom/lib/jsdom/living/nodes/DOMTokenList-impl.js:159:17)
      at Proxy.supports (node_modules/jsdom/lib/jsdom/living/generated/DOMTokenList.js:281:34)
      at node_modules/@google/model-viewer/lib/constants.js:54:28
      at node_modules/@google/model-viewer/lib/constants.js:55:2
      at node_modules/@google/model-viewer/dist/model-viewer-umd.js:2:68
      at Object.<anonymous> (node_modules/@google/model-viewer/dist/model-viewer-umd.js:5:3)

Are there any recommendations for test configuration/mocking in order to get past these errors?

[jmiller-83]

Ok, I think I have a workaround for my issue. I had to provide a mock for the @google/model-viewer module:

• Create a blank file <PROJECT_ROOT>/__mocks__/@google/model-viewer.js
• In package.json, add the following:

"jest": {
    "moduleNameMapper": {
      "@google/model-viewer": "<rootDir>/__mocks__/@google/model-viewer.js"
    }
  }