Snapshot testing

[alcferreira]

Hey people!

I'm trying to use this lib with snapshots testing and I'm getting an error.

Here's the stack trace:

TypeError: input.querySelector is not a function

      at InputElement._this.getInputDOMNode (node_modules/react-input-mask/lib/react-input-mask.development.js:543:23)
      at InputElement._this.getInputValue (node_modules/react-input-mask/lib/react-input-mask.development.js:554:25)
      at InputElement.componentDidMount (node_modules/react-input-mask/lib/react-input-mask.development.js:960:39)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6427:22)
      at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7516:7)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1881:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1919:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1968:29)
      at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7655:7)
      at completeRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8624:34)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8568:9)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8499:7)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8471:3)
      at requestWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8371:5)
      at scheduleWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8248:11)
      at scheduleRootUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8713:3)
      at updateContainerAtExpirationTime (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8740:10)
      at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8751:10)
      at create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9221:5)
      at getRenderedTree (node_modules/@storybook/addon-storyshots/dist/react/renderTree.js:24:14)
      at node_modules/@storybook/addon-storyshots/dist/test-bodies.js:21:18
      at node_modules/@storybook/addon-storyshots/dist/test-bodies.js:48:40
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/index.js:125:20)

The error happens here

react-input-mask/tests/input/input.js

Line 20 in 8de2f69

input = input.querySelector('input');

.

This issue may be related with the use of ReactDOM.findDOMNode

react-input-mask/tests/input/input.js

Line 16 in 8de2f69

input = ReactDOM.findDOMNode(input);

Docs
https://reactjs.org/docs/react-dom.html#finddomnode

[sanniassin]

@alcferreira Can you make a demo repo to reproduce this issue?

[alcferreira]

@sanniassin sure, the repository is open-source: https://github.com/CraveFood/farmblocks

Setup project
https://github.com/CraveFood/farmblocks/blob/master/CONTRIBUTING.md

• Download the repo
• Install dependencies with yarn
• run yarn build
• run storybook yarn storybook

Steps to reproduce:

• Add this story for the TextInput component: .add("With Mask", withInfo()(() => <TextInput mask="999-999-9999" />))
• Then run the tests yarn test -u

Story file can be found here: https://github.com/CraveFood/farmblocks/blob/master/packages/input-text/src/TextInput.story.js

The output should be

Storyshots › Text Input › With Mask

    TypeError: input.querySelector is not a function

      at InputElement._this.getInputDOMNode (node_modules/react-input-mask/lib/react-input-mask.development.js:543:23)
      at InputElement._this.getInputValue (node_modules/react-input-mask/lib/react-input-mask.development.js:554:25)[...]

Let me know if you need anything else (:

[sanniassin]

Fixed in 2.0.3