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

More Decks by Davidson Fellipe

Other Decks in Programming


  1. This talk won't ▸ Discuss about snapshots ▸ Convince you

    about writing tests ▸ How to setup these libraries
  2. ▸ 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!
  3. 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
  4. 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'); });
  5. 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.
  6. React Testing Library Tests mirror the way your software is

    used If you're not using Jest, then you must install jsdom
  7. 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
  8. 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
  9. 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 ⚠
  10. 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.
  11. 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
  12. 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