Unit testing plugin components that depend on Gutenberg data API?

[c-shultz]

I have some components in a Jetpack plugin (on this PR).

A couple components use withDispatch and withSelect. All is good when running in a browser with Gutenberg present, but unit testing my components becomes a challenge since those dependencies are out in Gutenberg.

I ended up splitting the component into two files: one with the core component that I ran tests against and the other that created the final higher order component using withDispatch and withSelect. That worked reasonably for that particular component, but feels a little hackish and probably won't work in every case.

Has anybody come up with a good approach for dealing with this? I fully suspect I'm missing a really obvious solution. :)

[gziolo]

There is a similar issue opened: #3955. We plan to publish source code of all Gutenberg modules to npm as independent packages, so you could use them in your tests the same way it is done in Gutenberg. It should happen this month. I admit it might be a blocker for testing components as of today.

[gziolo]

Let’s discuss details in #3955 😃

[gziolo]

In Gutenberg we also export a component without all thos HOCs applied and use it when unit testing. We always make sure selectors and actions are covered with tests and make sure withSelect and withDispatch don’t contain logic - only direct mapping from select calls to props or dispatch to props.