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


  1. to React Testing Library Adventures from Enzyme

  2. This talk will ▸ Walkthrough about our experience migrating from

    Enzyme to React Testing Library
  3. This talk won't ▸ Discuss about snapshots ▸ Convince you

    about writing tests ▸ How to setup these libraries
  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!
  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
  6. Example with Enzyme ... test('<Foo / >: allows us to

    set props', () => { const wrapper = mount(<Foo bar="yes" />); wrapper.setProps({ bar: ‘not-today‘ }); expect(wrapper.props().bar).toEqual(‘not-today'); });
  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.
  8. Another testing library? Maybe I can guess what you are

  9. React Testing Library Tests mirror the way your software is

    used If you're not using Jest, then you must install jsdom
  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
  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
  12. Another motivation https: //github.com/airbnb/enzyme/issues/2011

  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 ⚠
  14. Remove data-testid // test <p data-testid="crazy-id">{someAwesomeText} </p> // production code

    <p>{someAwesomeText} </p> With babel-plugin-jsx-remove-data-test-id you can remove data- test-id attributes from your production builds.
  15. Disallowing large snapshots https: //github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md

  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
  17. enzyme vs @testing-library/react https: // www.npmtrends.com/enzyme-vs-@testing-library/react

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

  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
  20. Thank you! ▸ github | twitter: davidsonfellipe ▸ https://fellipe.com/

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