Always dispatch real state in tests instead of using raw state objects

[tofumatt]

We have a lot of tests involving data/redux state that create a raw state object and test selectors, etc. against it. For example:

gutenberg/editor/store/test/selectors.js

Line 158 in c6a64a7

const state = {

This is dangerous because it doesn't accurately test the way the app behaves in the real world. We should be creating a data store and dispatching real actions to create an accurate store state that we can test against. This means if we change our actions/reducers/etc. our tests will catch breaking changes.

My recommendation is not to manually run things like createStore() for every test (we tried doing that in addons-frontend and it led to mozilla/addons#10436), but create a (few) state/store creation helpers for tests. We did that on the addons-frontend and it made testing really great.

[danielbachhuber]

Related mozilla/addons#12480

[gziolo]

It's similar to mozilla/addons#12480 which was closed with the following note:

In revisiting this and re-reading my comment at #6512 (comment) , the comment describes the encouraged approach to testing components. There should be no need to mock withSelect because one should not test the withSelect-bound component, but rather the component it wraps.

It can be reopened if it's still unclear or if there's a demonstrated benefit to an alternative approach, but I don't currently see any action item here.

Let's close this one as well. I also don't think that we should test bare components in unit tests and defer the rest to e2e tests which are great when covering more advanced use cases.