Problems running example tests
Closed this issue · 5 comments
Hi! I'm trying to setup this package for Slate tests, following the readme and example I ran into some issues. So I decided to run example tests and adjust my code but they failed with a hook issue:
FAIL src/tests/Editor.test.tsx
Mac
✕ user types into an empty editor (72 ms)
✕ user types multiple paragraphs into the editor (11 ms)
✕ user types with an expanded selection across paragraphs (8 ms)
Windows
✕ user types into an empty editor (10 ms)
✕ user types multiple paragraphs into the editor (7 ms)
✕ user types with an expanded selection across paragraphs (8 ms)
● Mac › user types into an empty editor
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
49 | initialValue = emptyEditor,
50 | }) => {
> 51 | const [value, setValue] = useState<Descendant[]>(initialValue)
| ^
52 | const renderElement = useCallback((props) => <Element {...props} />, [])
53 | const renderLeaf = useCallback((props) => <Leaf {...props} />, [])
54 | const editor = useMemo(
at resolveDispatcher (node_modules/react/cjs/react.development.js:1476:13)
at useState (node_modules/react/cjs/react.development.js:1507:20)
at RichTextExample (src/Editor.tsx:46:37)
According to React docs I checked react and react-dom versions - they both are 16.8.0, I tried to upgrade to recent 17.0.2 - still same error. The component is functional and hooks are called on top-level so that one should be fine. For different copies of React I also did suggested check and it also shows everything is fine.
npm ls react
slate-playground@0.0.0 >slate-test-utils/example
├─┬ @testing-library/react@12.1.2
│ ├─┬ react-dom@17.0.2
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2
└─┬ slate-react@0.70.0
└── react@17.0.2 deduped
Not sure what is going on, maybe you have any ideas?
OK, I figured out the main setup is for yarn and running with npm doesn't handle react in the same way. Running tests with yarn does work.
As for other issues it turned out I missed the patch part, the symptoms were: No hyperscript creator found for tag: <htext>, also text editing commands did not work except pressEnter and deleteBackward maybe this helps someone too.
@maximvl You'll need to use yarn to run the repo otherwise it'll pull the latest versions of things and peer deps may be handled differently causing two versions of react. As for the patches, it's a bummer but that's part of the magic. I think I have that part documented though.
Going to close this out, if you have any other issues or want to see a feature let me know!
@mwood23 Hey, thanks for the reply. I wonder if there is a way around the patches? I see the main one is about jsdom's InputEvent. I also created an issue for jsdom to ask their opinion. As I don't have much experience with events, what do you think would be the proper way to make them work without patching?
To use the package you need the patches to stub the APIs with what we need for an editor. I'd be happy to contribute this to JSDOM and the hot keys package if they're interested in taking it. The reason I didn't is because testing is specific to a project's tooling and if it's using something like create react app, it's all built in. Even if it was merged today, it could be 6 months to a year for the packages to update to support it out of the box. I wanted to put out a package everyone could use today with their current setup without updating a bunch of deps. As for using it without the patches, I don't know how to do that since it's using the generated stuff from webidl files. Maybe the JSDOM team will have some information.
If you could link to the issue that'd be great so I can keep an eye on what they say.
@mwood23 Sure, here it is: jsdom/jsdom#3330