1. 04 Nov, 2019 3 commits
    • Robert Knight's avatar
    • Robert Knight's avatar
      Change mocking approach for imported components in tests · 147f561c
      Robert Knight authored
      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.
      147f561c
    • Robert Knight's avatar
      Add a utility to mock all components imported by a module · 721bf3f8
      Robert Knight authored
      This will be used as an alternative to shallow rendering to facilitate
      unit-testing of Preact components.
      721bf3f8
  2. 29 Oct, 2019 1 commit
  3. 28 Oct, 2019 17 commits
  4. 25 Oct, 2019 6 commits
  5. 24 Oct, 2019 2 commits
  6. 22 Oct, 2019 6 commits
  7. 21 Oct, 2019 5 commits