Adventures from Enzyme to React Testing Library

Transcript

1. to React Testing Library
   Adventures from Enzyme
   

   View Slide

2. This talk will
   ▸ Walkthrough about our experience migrating
   from Enzyme to React Testing Library
   

   View Slide

3. This talk won't
   ▸ Discuss about snapshots
   ▸ Convince you about writing tests
   ▸ How to setup these libraries
   

   View Slide

4. ▸ I write code and lead a team at Loadsmart
   ▸ Previously, I worked in some companies in Brazil and
   organized some conferences for web developers in
   Brazil: Front in BH, Front in Recife, Pernambuco.JS, and
   Rio.JS.
   ▸ github | twitter: davidsonfellipe
   ▸ https://fellipe.com/
   ✋ Hello!
   

   View Slide

5. Enzyme
   ▸ JavaScript Testing utility for React
   ▸ Provide some API wrappers that make it easier to manipulate,
   navigate, and simulate events.
   ▸ Also allows us to access to props, state, methods
   

   View Slide

6. Example with Enzyme
   ...
   test(': allows us to set props', () => {
   const wrapper = mount();
   wrapper.setProps({ bar: ‘not-today‘ });
   expect(wrapper.props().bar).toEqual(‘not-today');
   });
   

   View Slide

7. After some years using Enzyme
   ▸ A lot of tests depending on the implementation like
   classnames, states, props, component names
   ▸ A lot of snapshots (full of implementation details) tests
   making a False safety
   ▸ And then, Testing Library started to appear.
   

   View Slide

8. Another testing library?
   Maybe I can guess what you are thinking…
   

   View Slide

9. React Testing Library
   Tests mirror the way your software is used
   If you're not using Jest, then you must install jsdom
   

   View Slide

10. React Testing Library
    Limited number of ways you can interact with
    elements
    Enforce you to use things like placeholder, aria, test-ids
    to interact with elements
    

    View Slide

11. Which query should I use?
    Queries Accessible to Everyone Semantic Queries Test IDs
    getByLabelText
    getByPlaceholderText
    getByText
    getByDisplayValue
    getByAltText
    getByTitle
    getByRole
    getByTestId*
    Priority Based on the Guiding Principles
    

    View Slide

12. Another motivation
    https: //github.com/airbnb/enzyme/issues/2011
    

    View Slide

13. After some time using RTL
    ▸ Focus on user cases than coverage
    ▸ A lot of data-testid in production code ⚠
    ▸ Still have some large snapshots ⚠
    ▸ React-testing-library from 6 to 9 ⚠
    

    View Slide

14. Remove data-testid
    // test
    {someAwesomeText}
    // production code
    {someAwesomeText}
    With babel-plugin-jsx-remove-data-test-id you can remove data-
    test-id attributes from your production builds.
    

    View Slide

15. Disallowing large snapshots
    https: //github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md
    

    View Slide

16. Enzyme RTL
    ▸ focusing on the implementation
    ▸ helps on the component tree
    navigation
    ▸ shallow, render, mount
    ▸ focused on user behavior
    ▸ based on selectors that the
    user see
    ▸ render, will never support
    shallow rendering
    you can write user focused test with enzyme, but it’s not natural
    

    View Slide

17. enzyme vs @testing-library/react
    https: // www.npmtrends.com/enzyme-vs-@testing-library/react
    

    View Slide

18. And now is a recommended tool
    https: //twitter.com/kentcdodds/status/981961256008548352
    

    View Slide

19. How is it working so far?
    ▸ It’s improving the tests readability
    ▸ Helped us create tests easier to be reused if we change
    the implementation
    ▸ Encouraging writing code with better accessibility
    ▸ Starting to use eslint-plugin-jest
    

    View Slide

20. Thank you!
    ▸ github | twitter: davidsonfellipe
    ▸ https://fellipe.com/
    

    View Slide

21. Photos
    ▸ https://unsplash.com/photos/3l3RwQdHRHg
    ▸ https://unsplash.com/photos/8rj4sz9YLCI
    ▸ https://unsplash.com/photos/PXB7yEM5LVs
    ▸ https://unsplash.com/photos/h3VTw0wGOyo
    

    View Slide