Comments (8)
I am working on getting a repro ready to go. Unfortunately, the project I'm working on is closed source. I am trying to get a codesandbox example but am running into with fillStyle
which I've read can be fixed w/jest-canvas-mock
but am not getting anywhere with that.
Here it is if you want to give it a try: https://codesandbox.io/s/react-17-forked-y43gl3?file=/src/tests/Signature.spec.js
from react-signature-canvas.
I am trying to get a codesandbox example but am running into with
fillStyle
which I've read can be fixed w/jest-canvas-mock
but am not getting anywhere with that.
Yea this is probably the crux of the issue -- the canvas
implementation isn't working.
react-signature-canvas
's internal tests use node-canvas
, which jsdom
supports automatically if detected.
Here it is if you want to give it a try: https://codesandbox.io/s/react-17-forked-y43gl3?file=/src/tests/Signature.spec.js
You're using CRA for this CodeSandbox, so you may very well be running into hustcc/jest-canvas-mock#72 .
I couldn't get it to work in CodeSandbox, and that might be due to requiring native binaries like node-canvas
etc, or due to CRA issues. Had some issues running in a node
template (couldn't get things to install), but that may make more sense than the CRA template since Jest runs via Node etc.
I did create a more minimal StackBlitz project for this instead, and the tests pass fine there: https://stackblitz.com/edit/rsc-issue-81?file=index.spec.js .
So I think the issue is within some part of your environment, as a minimal example succeeds.
from react-signature-canvas.
Switching to node-canvas
fixed that test. Found the same suggestion here.
@agilgur5 thank you for your responsiveness and willingness to help!
from react-signature-canvas.
Fun fact, apparently I ran into the fillStyle
issue as well when I was first creating the test suite 3 years ago in #33 (comment) .
Using compatible versions of node-canvas
and jsdom
resolved it there per that issue.
from react-signature-canvas.
I am creating a wrapper around the
react-signature-canvas
and 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
componentWillUnmount
is being called. That calls theoff
method to remove the event listeners.
In the current version ofreact-signature-canvas
, the underlyingsignature_pad
ref
starts asnull
, so from the error message, it sounds like the internalref
isnull
during your mount.
The next version ofreact-signature-canvas
(themain
branch) is written in TS and because of the strict typing, actually has an error check if theref
isnull
. 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-canvas
itself. -
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
jsdom
and an additionalwindow-resizeto
polyfill (for mocking the resize functionality). If there's no DOM, a DOMref
wouldn't exist, so that could very well break a bunch of things like this.
So I'm not sure what yourjest.config.js
looks like, but my suspicion would be that the test set-up is missing some configuration.
from react-signature-canvas.
Looking at the stack trace a bit more, jsdom
does pop up so I'm assuming you are using jsdom
?
Also not sure which version of React this is on, as React 18 is currently untested (c.f. #76, which also discusses the need to migrate to RTL from Enzyme -- this may be related given that you're using RTL)
EDIT: Hmmm... it is possible you're running into the exact situation discussed in the TS rewrite review: #42 (comment) .
As I mentioned there, it's possible that doing nothing (i.e. catching the error and doing a no-op instead) when the ref
is null
is more appropriate than throwing an error; the crux there was if such a situation were proper user behavior or erroneous behavior (where throwing an error is indeed appropriate). That rewrite is non-breaking though, as it would error out regardless.
You're literally just mounting it, so err, that doesn't seem like erroneous behavior (😅 ), but as it only happens during testing, it still may be a testing set-up issue or a bug upstream in one of the testing libraries. Especially as this hasn't shown up in the many years this has existed until now
from react-signature-canvas.
@agilgur5 thank you for the quick response! I am using jsdom
but it is the RTL wrapper around it import '@testing-library/jest-dom';
I am still on react 17, so that shouldn't be an issue.
from react-signature-canvas.
I am using
jsdom
but it is the RTL wrapper around itimport '@testing-library/jest-dom';
Mmm @testing-library/jest-dom
isn't a wrapper for jsdom
, it's a set of DOM matchers for Jest. It doesn't depend on jsdom
either.
A minimal reproduction would help here. Especially your jest.config.js
, package.json
, and your component's render
code. The last part may be causing an error or something that's making it unmount in the testing environment.
from react-signature-canvas.
Related Issues (20)
- issues in latest Google Chrome 117 HOT 4
- Cannot get SVG data url after `getTrimmedCanvas()` HOT 3
- working in localhost but when published not working on dev env HOT 1
- Saving and Restoring DataURL results in smaller image HOT 1
- How to check if a dataURL is empty? HOT 1
- Update to `signature_pad` v4 for "passive" events? HOT 4
- `time` attribute only present in last stroke
- Convert raw array data (`toData`) to image so it can be scaled? HOT 5
- React 18 support in peerDeps HOT 9
- Custom CSS properties? (for custom cursor etc) HOT 1
- `onBegin` not called when `fromData` invoked HOT 1
- `TypeError: undefined is not an object (evaluating 'this._data[this._data.length-1].push')` HOT 1
- `TypeError: sigCanvas.current.getTrimmedCanvas is not a function` HOT 1
- `TypeError: sigCanvas.current.getTrimmedCanvas is not a function` HOT 2
- Background Image lost while converting `toData` and back with `fromData` ("undo" operation) HOT 2
- support for `redrawOnResize` func HOT 2
- Weird artifacts using Next.js 13 HOT 3
- Stroke offset with Next.js prod build HOT 2
- What is the difference between SignaturePad and SignatureCanvas? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-signature-canvas.