Shallow rendering with Enzyme's `shallow` function conflates two changes in
rendering behavior:

 1. Only rendering "one level deep" so that a test for a component is
    isolated from the details of any child components

 2. In React (but not Preact) rendering to a data structure instead of
    real DOM nodes. Even though Preact still renders real DOM nodes,
    Enzyme's shallow rendering API removes many of the features of
    `mount` rendering

In practice, we only used shallow rendering for (1) and we have found
that there are use cases where we want (1) but still want to be able to
interact with the real DOM nodes (ie. we don't want (2)). The need to
use different mocking approaches and understand the conflated behaviors
mentioned above has been a source of confusion for developers.

This commit changes the mocking approach to always use a pattern that we
have until now only used selectively. Enzyme's `mount` rendering mode is
always used, but a utility function, `mockImportedComponents`, is used
with our existing import mocking (via babel-plugin-mockable-imports) to
semi-automatically mock all imported components.

Each test has been changed as follows:

 1. Replace `shallow` with `mount`

 2. Call `ComponentUnderTest.$imports.$mock(mockImportedComponents())`
    in the test setup to mock all imported components, but not helper
    components defined in the same file.

 3. Call `ComponentUnderTest.$imports.$restore()` in test cleanup, if
    the test was not already doing that.

 4. Replace uses of (`wrapper.find(SomeChildComponent)`) with
    (`wrapper.find('SomeChildComponent')`. This is necessary because the
    mocked component no longer has the same identity as the original, so
    we look it up by name instead.