Improve the ability to introspect rendered react trees

[orta]

Right now we're using jest-snapshots to say "this is the whole structure" of a react tree. We use those tests to verify that is what we want, but those tests are a really thick brush and say nothing about behaviours that you expect.

I'd like to write some tests that verify the behaviour of the react tree, for example:

it("shows an image with the number of images when passed image data", () => {
 state = {
   photos: ["url1", "url2", "url3"],
 }
 const todo = renderer.create(<TODO {...state}/>).toJSON()
 const image = getComponent(todo, "Background Button[1] ImagePreview")
 expect(image).toBeTruthy()

 const text = getComponent(image, "ImagePreview ImageDarkener InlineCopy")
 expect(text.text).toEqual(3)
})

So we could consider looking into what the minimal parts of Enzyme can be found that work with react-test-renderer.

[orta]

Lols, once again @wix is a few months ahead of us: https://yarnpkg.com/en/package/react-test-renderer-utils

[orta]

I think they're trying to do something else here, we may still need to build this ourselves

[orta]

In true JavaScript style, enzyme is already a dependency of Emission. Just found it.

[orta]

It gets used in artwork_rail-tests.tsx from #537

[orta]

I guess that simplifies that /shrug.

[orta]

Enzyme got removed from the repo, as it wasn't used anywhere. So we're back to square 1.

I investigated deeper into react's shallow renderer

It's still tough make non-brittle tests that are not just straight up "render to snapshots" or "render to svg"

import * as React from "react"
import * as renderer from "react-test-renderer"
import * as shallow from "react-test-renderer/shallow"

describe("User Interaction", () => {
  it("calls goto Artist on to the artist button", () => {
    const testFunc = jest.fn()

    const r = shallow.createRenderer()
    r.render(<TODO goToArtist={testFunc} />)
    const e = r.getRenderOutput()

    e.props.children[1].props.onPress()
    expect(testFunc).toBeCalled()
})

Which does something, but I can't find a safe way to find the thing I'm looking for when the objects all look like this:

{ '$$typeof': Symbol(react.element),
      type: [Function: Button],
      key: null,
      ref: null,
      props:
       { onPress:
          { [Function: mockConstructor]
            _isMockFunction: true,
            getMockImplementation: [Function],
            mock: [Getter/Setter],
            mockClear: [Function],
            mockReset: [Function],
            mockReturnValueOnce: [Function],
            mockReturnValue: [Function],
            mockImplementationOnce: [Function],
            mockImplementation: [Function],
            mockReturnThis: [Function],
            mockRestore: [Function] },
         children: [ [Object], [Object], [Object] ] },
      _owner: null,
      _store: {} }

I feel like this is a bit of a style-components + using functional components everywhere issue