mwood23 / slate-test-utils Goto Github PK

Hello! First of all, congratulations and thank you very much for this utility. The library looks really promising for writing meaningful test easily, specially when compared with the alternatives.

Opening this issue because it would be nice to keep the slate and slate-react dependencies versions updated. I skimmed through the code and Slate's changelog and since 0.70.0 (current dependency version) there doesn't seem to be any critical changes for this library. Might be useful to use hyphen ranges 0.70.0-0.72.x to keep supporting at least the most recent patch on current minor version.

Thanks again for open sourcing this!

Thanks for this library - feels like it could be the solution to so many problems ! I'm having trouble getting a minimal test setup with an editor.

When I create the editor using withHistory(withReact(mockEditor ?? createEditor()) I end up getting the error TypeError: Cannot add property deleteBackward, object is not extensible

Any idea what might be happening there ?

Versions:
React: 17.0.2
Slate: 0.78.0
Slate-React: 0.79.0

Hi, first I like the way I can test snapshots with this framework.

How can I test user interaction involving adding image to the editor being tested?

[email protected] depends on @testing-library/react v12. Trying to install slate-test-utils with @testing-library/react v13 fails.

$ npm i --save-dev slate-test-utils                                                                                                                     
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @testing-library/[email protected]
npm ERR! node_modules/@testing-library/react
npm ERR!   dev @testing-library/react@"13.3.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @testing-library/react@"^12.1.2" from [email protected]
npm ERR! node_modules/slate-test-utils
npm ERR!   dev slate-test-utils@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

• slate-test-utils: 1.3.2
• testing-library/react: 13.3.0
• node: 14.18.2
• npm: 7.24.2

Hey, love the project, it's very much needed in the slatejs space. I was just wondering if this is still being actively maintained? I've recently updated to jest 28 with jest-environment-jsdom and it completely broke the editor tests. Are there any plans for supporting newer versions of jest?

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
[email protected] >slate-test-utils/example
├─┬ @testing-library/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected]
└─┬ [email protected]
  └── [email protected] deduped

Not sure what is going on, maybe you have any ideas?

I have this test:

const input = (
      <editor>
        <hpage>
          <hp>1</hp>
          <hp>
            2<cursor />
          </hp>
        </hpage>
      </editor>
    ) as any as TEditor

    const [editor] = await buildTestHarness(PlateTest)({
      editor: createPlateEditor({
        editor: input,
        plugins: [createPagePlugin()],
      }),
    })

    editor.insertFragment(
      <fragment>
        <hpage>
          <hp>3</hp>
        </hpage>
        <hpage>
          <hp>4</hp>
        </hpage>
      </fragment>,
    )

    const output = (
      <editor>
        <hpage>
          <hp>1</hp>
          <hp>23</hp>
          <hp>4</hp>
        </hpage>
      </editor>
    )

    assertOutput(editor, output)

The editor diff is confusing me:

Expected: null
Received: {"anchor": {"offset": 1, "path": [0, 2, 0]}, "focus": {"offset": 1, "path": [0, 2, 0]}}

Hello, thanks for coming up with this clever solution. Testing w/ Slate is critical yet very much unsolved, or at least it was until this came out! Where I work, we've been using Cypress w/ several hacks in place to test Slate. This is much faster, neater abstraction.

I was wondering if you had any idea how to enable the jsx extensions with an already set importSource using the automatic JSX runtime.

We're using Emotion, which requires us to set the pragma importSource to @emotion/react.

It would be so awesome if we could use the JSX using what's described in this packages README in addition to Emotion.

I'm not blocked, I can just not use JSX syntax and instead use the function exported from slate-hyperscript:

    jsx('editor', {}, [
      jsx('element', { type: 'paragraph' }, [
        jsx('text', ['potato']),
        jsx('text', { bold: true }, [' cucumbers', jsx('cursor')]),
      ]),
    ]),

Feel free to close this issue if it's off topic or you're not sure what the solution would look like.

Thanks again for creating and open sourcing this package!

I tried cloning your example, basically as is, and I'm getting errors on npm test.

eg

npm test

> [email protected] test
> jest --verbose

 FAIL  src/tests/ensure-valid.test.tsx
  ● Test suite failed to run

    Cannot find module 'lodash.clonedeep' from 'node_modules/slate-test-utils/dist/cjs/ensureSlateValid.js'

    Require stack:
      node_modules/slate-test-utils/dist/cjs/ensureSlateValid.js
      node_modules/slate-test-utils/dist/cjs/buildTestHarness.js
      node_modules/slate-test-utils/dist/cjs/index.js
      src/tests/ensure-valid.test.tsx

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (node_modules/slate-test-utils/dist/cjs/ensureSlateValid.js:5:28)

You can find an example repo here.
https://github.com/rzachariah/slate-example