diff --git a/docs/preact-testing-library/learn.md b/docs/preact-testing-library/learn.md index 5b7b31166..5a7ef635c 100644 --- a/docs/preact-testing-library/learn.md +++ b/docs/preact-testing-library/learn.md @@ -23,6 +23,7 @@ If you're still hungry for more at this point than checkout: - The react-testing-library: - [API](../react-testing-library/api.md) - [Example](../react-testing-library/example-intro.md) + - [Migrate from Enzyme](../react-testing-library/migrate-from-enzyme.md) - [Sandbox](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples) - [FAQ](../react-testing-library/faq.md) - This YouTube video by LevelUpTuts called diff --git a/docs/react-testing-library/migrate-from-enzyme.md b/docs/react-testing-library/migrate-from-enzyme.md new file mode 100644 index 000000000..9686a5c2f --- /dev/null +++ b/docs/react-testing-library/migrate-from-enzyme.md @@ -0,0 +1,374 @@ +--- +id: migrate +title: Migrate from Enzyme +sidebar_label: Migrate from Enzyme +--- + +This page does not go into detail, but it's for those who have experience in +working with Enzyme and are trying to understand how to move to React Testing +Library. It also has some helpful information for those who are comparing Enzyme +with React Testing Library. + +## What is React Testing Library? + +React Testing Library is part of an open-source project named +[Testing Library](https://github.com/testing-library). There are several other +helpful tools and libraries in the Testing Library project which you can use +them to write more useful tests. Beside React Testing Library, here are some +other Testing Library's libraries that can help you along the way: + +- **[@testing-library/jest-dom](https://github.com/testing-library/jest-dom)**: + jest-dom provides a set of custom jest matchers that you can use to extend + jest. These will make your tests more declarative, clear to read, and to + maintain. + +- **[@testing-library/user-event](https://github.com/testing-library/user-event):** + user-event tries to simulate the real events that would happen in the browser + as the user interacts with it. For example, userEvent.click(checkbox) would + change the state of the checkbox. + +## Why should I use the React Testing Library? + +Enzyme is a good test library. The library and its contributors did so much for +the community. Many of the React Testing Library maintainers used and +contributed to Enzyme for years before developing and working on React Testing +Library. So we want to say, thank you to the contributors of Enzyme! + +The primary purpose of the React Testing Library is to give you confidence by +testing your components in the way the user will use them. Users don't care what +happens behind the scenes. They just see and interact with the output. So, +instead of accessing the components' internal API, or evaluating the `state`, +you'll get more confidence by writing your tests based on the component output. + +React Testing Library aims to solve the problem that many developers face when +writing tests with Enzyme which allows (and encourages) developers to test +[implementation details](https://kentcdodds.com/blog/testing-implementation-details). +Tests which do this ultimately prevent you from modifying and refactoring the +component without changing the test. As a result, the tests slowed down your +development speed and productivity, since every small change requires rewriting +some part of your tests, even if the change you made does not affect the +component's output. + +Re-writing your tests in React Testing library worthwhile because you're trading +tests that slow you down for tests that give you more confidence and increase +your productivity in the long run. + +## How to migrate from Enzyme to React Testing Library? + +One of the keys to a successful migrate is to do it incrementally, by running +the two test libraries side by side in the same application and porting Enzyme's +tests to React Testing Library one by one. It makes it possible to migrate even +large and complex applications without disrupting other businesses because the +work can be done collaboratively and spread over some time. + +## Install React Testing Library + +You can check +[this page](https://testing-library.com/docs/react-testing-library/setup) for +the complete installation and setup guide. + +Here is what you should do, first you need to install the React Testing Library: + +``` +npm install --save-dev @testing-library/react @testing-library/jest-dom +``` + +## Import React Testing Library to your test + +Let's say we're using Jest (you can use other test frameworks as well), then you +just have to import the following modules into your test file: + +```jsx +// import React so you can use JSX (React.createElement) in your test +import React from 'react' + +/** + * render: lets us render the component (like how React would) + * screen: Your utility for finding elements the same way the user does + **/ +import { render, screen } from '@testing-library/react' +``` + +The test structure is as same as how you would write it in Enzyme + +```jsx +test('test title', () => { + // Your tests come here... +}) +``` + +> Note: you can also use `describe` and `it` blocks with React Testing Library. +> React Testing Library doesn't replace Jest, just Enzyme. We recommend `test` +> because it helps with this: +> [Avoid Nesting When You're Testing](https://kentcdodds.com/blog/avoid-nesting-when-youre-testing) + +## Basic Enzyme to React Testing Library migration examples + +One thing to keep in mind that there's not a one-to-one mapping of Enzyme +features to React Testing Library features. Many Enzyme features result in +inefficient tests. Unfortunately, that means many of the features you're +accustomed to with Enzyme will need to be left behind with Enzyme (no more need +for a `wrapper` variable or `wrapper.update()` calls, etc.). + +React Testing Library has helpful queries which lets you access your component's +elements and their properties, and here we'll show typical Enzyme tests with +React Testing Library's alternatives. + +Let's say we have a `Welcome` component, which just shows a welcome message, and +we will have a look at both Enzyme and React Testing Library tests to learn how +we can test this component: + +**React Component** + +The following component gets a `name` from `props` and shows a welcome message +in an `h1` element, it also has a text input which users can change to a +different name, and the template updates accordingly. Check the live version on +[Codesandbox](https://codesandbox.io/s/ecstatic-hellman-fh7in) + +```jsx +const Welcome = props => { + const [values, setValues] = useState({ + firstName: props.firstName, + lastName: props.lastName, + }) + + const handleChange = event => { + setValues({ ...values, [event.target.name]: event.target.value }) + } + + return ( +