Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adventures from Enzyme to React Testing Library

Adventures from Enzyme to React Testing Library

Davidson Fellipe

December 04, 2019
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

Transcript

  1. to React Testing Library
    Adventures from Enzyme

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide