React Testing Library + Spectrum UXP

Photoshop
1

I’m attempting to set up react-testing-library and user-event to test my plugin. However, I’m struggling with issues that (I assume) stem from the Spectrum UXP web components. As an example, user-event’s type command don’t appear to impact <sp-textfield>, it’s clear command throws an error about not working on uneditable elements, and something simple like expect(myComponent).toHaveValue() doesn’t yield anything.

Does anyone know of a working example of something like this? I still don’t quite have my head around what the web-components actually are in this environment — whether they’re functional elements I should expect to work — or whether I need to mock functionality to get things to function.

2

Did you check the Event Handling docs? I myself use wc-react

3

Maybe could you add data- attribute and pass tested value there? e.g. data-test-value={this.props.dummy} It is not perfect but could be best alternative. Or maybe if you want to wrap native components into your own and pass it there automatically. Similar to this: react-uxp-spectrum/Textfield.tsx at main · jardicc/react-uxp-spectrum · GitHub

Used like this: alchemist/SnippetContainer.tsx at master · jardicc/alchemist · GitHub

4

I’ve got things working fine (events and whatnot) when it’s live in Photoshop. The issue comes in tests when trying to use react-testing-library which simulates user actions. My assumption is that, when running in Photoshop, the web components are being proxied in real time, but in the jest environment, they aren’t anything, just empty web-components without any inherent implementation. My knowledge web components is admittedly limited, but I’m guessing that when a test tries to input text, <sp-textfield> is effectively a div rather than an input, so it fails to do anything. To make this work, I guess I have to mock <sp-textfield> to be an <input> or something along those lines — something I’m hoping someone has an example of somewhere.

5

To close the loop on this, I found a solution that isn’t ideal, but solves my personal use case. I’m using React component wrappers around the web components, pretty much clones of GitHub - thejustinwalsh/react-uxp-spectrum: Adobe UXP Spectrum Web Components for React. Since these components are simple wrappers around the web components, I’m just mocking them in Jest to have them render markup I can test.

// The mock will be an input rather than sp-textfield
function mockTextField({ ...props }: any) {
  return <input role="textbox" {...props} />
}

jest.mock('./spectrum-ui/text-field', () => mockTextField)

I don’t love this as a solution since it’s not testing the actual production code, but it’s only changing a single element, so the risk area is fairly low — and it beats not having tests at all.