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 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/[email protected]/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