Skip to content

Commit

Permalink
chore(docs): update import for @testing-library/react support (gatsby…
Browse files Browse the repository at this point in the history
…js#14531)

## Description

`react-testing-library` recently moved to `@testing-library/react`

This PR fixes the docs to match the newly updated version.
  • Loading branch information
dyyyl authored and freiksenet committed Jun 4, 2019
1 parent 0a473ec commit 2f5c31b
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions docs/docs/testing-react-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ It provides light utility functions on top of `react-dom` and `react-dom/test-ut
Install the library as one of your project's `devDependencies`. Optionally you may install `jest-dom` to use its [custom jest matchers](https://github.com/gnapse/jest-dom#custom-matchers).

```shell
npm install --save-dev react-testing-library jest-dom
npm install --save-dev @testing-library/react jest-dom
```

Create the file `setup-test-env.js` at the root of your project. Insert this code into it:
Expand All @@ -24,7 +24,7 @@ Create the file `setup-test-env.js` at the root of your project. Insert this cod
import "jest-dom/extend-expect"

// this is basically: afterEach(cleanup)
import "react-testing-library/cleanup-after-each"
import "@testing-library/react/cleanup-after-each"
```

This file gets run automatically by Jest before every test and therefore you don't need to add the imports to every single test file.
Expand All @@ -39,11 +39,11 @@ module.exports = {

## Usage

Let's create a little example test using the newly added library. If you haven't done already read the [unit testing guide](/docs/unit-testing) — essentially you'll use `react-testing-library` instead of `react-test-renderer` now. There are a lot of options when it comes to selectors, this example chooses `getByTestId` here. It also utilizes `toHaveTextContent` from `jest-dom`:
Let's create a little example test using the newly added library. If you haven't done already read the [unit testing guide](/docs/unit-testing) — essentially you'll use `@testing-library/react` instead of `react-test-renderer` now. There are a lot of options when it comes to selectors, this example chooses `getByTestId` here. It also utilizes `toHaveTextContent` from `jest-dom`:

```js
import React from "react"
import { render } from "react-testing-library"
import { render } from "@testing-library/react"

// You have to write data-testid
const Title = () => <h1 data-testid="hero-title">Gatsby is awesome!</h1>
Expand Down

0 comments on commit 2f5c31b

Please sign in to comment.