agilgur5
commented
2 years ago I am creating a wrapper around the
react-signature-canvasand am working on writing jest tests for it withtesting-libarary/react
Wrapper components are definitely encouraged since this is an unopinionated and unstyled component! Everyone's got their own UI components, UX flows, and CSS styles, so I think composition for a more specific use-case is good separation of concerns (while this component handles the generic use-case).
When I originally built this component years ago, I also had an internal wrapper around it at my company, with buttons, a modal, react-bootstrap integration, etc.
Also tested components great too 👍
Rendering in the browser seems to work. Any suggestions as to what I'm doing wrong or is this a bug?
Hard to tell without a reproduction as there's a number of moving pieces here. I've never seen this error before and a few pieces of your issue hint that this isn't a bug:
-
The stack trace shows that is being hit during unmounting actually. I'm not sure why that's happening, but
componentWillUnmountis being called. That calls theoffmethod to remove the event listeners. In the current version ofreact-signature-canvas, the underlyingsignature_padrefstarts asnull, so from the error message, it sounds like the internalrefisnullduring your mount. The next version ofreact-signature-canvas(themainbranch) is written in TS and because of the strict typing, actually has an error check if therefisnull. It's a rare case, but it usually means you're calling a method during a mount/unmount (sounds related, right?). Even in that version though, it would still error, but it would give a more specific (and hopefully more helpful) error fromreact-signature-canvasitself. -
You mentioned that rendering in browser works, so it may very well be your test set-up. Internally, the tests I wrote for this component use
jsdomand an additionalwindow-resizetopolyfill (for mocking the resize functionality). If there's no DOM, a DOMrefwouldn't exist, so that could very well break a bunch of things like this. So I'm not sure what yourjest.config.jslooks like, but my suspicion would be that the test set-up is missing some configuration.
AndrewOttavianoAbb
Hello and thank you so much for your work on this project! I am creating a wrapper around the
react-signature-canvasand am working on writing jest tests for it withtesting-libarary/react. I am simply trying to mount it to ensure it displays properly and am receiving the following error. I'm not passing anything to it besides aref(created withuseRef); I'm not even touchingcanvasProps(at this point). I am rendering the parent<div />with adata-testidso that I can grab hold of it in testing-library.Test Code:
(
Signatureis my wrapper component, this is what I'm actually rendering<SignatureCanvas ref={canvasRef} {...canvasAttributes} />butcanvasAttributesisnullin my test above.)Stack trace:
``` ● Signature › Component renders successfully TypeError: Cannot read properties of null (reading 'off') 5 | describe('Signature', () => { 6 | it('Component renders successfully', () => { > 7 | render(Rendering in the browser seems to work. Any suggestions as to what I'm doing wrong or is this a bug?