Repository: ianstormtaylor/slate
File: packages/slate-react/test/index.spec.tsx (TypeScript)

Code before:

        // return a decoration spanning foo_b[ar_ba]z
        decorate.mockImplementation(([node]) => {
          if (node !== value[0]) {
            return []
          }

          return [
            {
              anchor: { path: [0, 1, 0], offset: 1 },
              focus: { path: [0, 2, 0], offset: 2 },
              highlight: true,
            },
          ]
        })

        act(() => {
          el.update(
            <Slate editor={editor} value={value} onChange={onChange}>
              <DefaultEditable decorate={decorate} renderLeaf={renderLeaf} />
            </Slate>
          )
        })

        // 4 rerenders, for b,ar,ba,z
        expect(renderLeaf).toHaveBeenCalledTimes(4)
        expect(renderLeaf.mock.calls).toEqual(
          expect.arrayContaining([
            [
              expect.objectContaining({
                leaf: { highlight: false, text: 'b' },
              }),
            ],
            [
              expect.objectContaining({
                leaf: { highlight: true, text: 'ar' },
              }),
            ],
            [
              expect.objectContaining({
                leaf: { highlight: true, text: 'ba' },
              }),
            ],
            [
              expect.objectContaining({
                leaf: { highlight: false, text: 'z' },
              }),
            ],
          ])
        )
      })

Review comment (suggestion):
I don't think we need to test rendering here, it's already covered in the previous tests, we should focus on which ranges are passed to the leaf which simplifies the test a bit.

```suggestion
        const decorate = jest.fn<Range[], [NodeEntry]>(([node]) => {
          if (node !== value[0]) {
            return []
          }

          return [
            {
              anchor: { path: [0, 1, 0], offset: 1 },
              focus: { path: [0, 2, 0], offset: 2 },
              highlight: true,
            },
          ]
        })
        const renderLeaf = jest.fn<JSX.Element, [RenderLeafProps]>(DefaultLeaf)
        const onChange = jest.fn<void, []>()

        let el: ReactTestRenderer

        act(() => {
          el = create(
            <Slate editor={editor} value={value} onChange={onChange}>
              <DefaultEditable decorate={decorate} renderLeaf={renderLeaf} />
            </Slate>,
            { createNodeMock }
          )
        })

        // 4 rerenders, for b,ar,ba,z
```

Code after:
            <Slate editor={editor} value={value} onChange={onChange}>
              <DefaultEditable decorate={decorate} renderLeaf={renderLeaf} />
            </Slate>,
            { createNodeMock }
          )
        })

        // 4 renders, for foo,b,ar,ba,z
        expect(renderLeaf).toHaveBeenCalledTimes(5)
        expect(renderLeaf.mock.calls).toEqual(
          expect.arrayContaining([
            [
              expect.objectContaining({
                leaf: { highlight: false, text: 'foo' },
              }),
            ],
            [
              expect.objectContaining({
                leaf: { highlight: false, text: 'b' },
              }),
            ],
            [
              expect.objectContaining({
                leaf: { highlight: true, text: 'ar' },
              }),
            ],
            [
              expect.objectContaining({
                leaf: { highlight: true, text: 'ba' },
              }),
            ],
            [
              expect.objectContaining({
                leaf: { highlight: false, text: 'z' },
              }),
            ],
          ])
        )
      })
    })
  })
})