<commit_before>---
id: tutorial-react
title: Tutorial – React
layout: docs
category: Quick Start
permalink: docs/tutorial-react.html
next: tutorial-react-native
---

At Facebook, we use Jest to test [React](http://facebook.github.io/react/)
applications.

## Setup

We are using the `babel-jest` package and the `react` babel preset to transform our code inside of the test environment. Also see [babel integration](/jest/docs/getting-started.html#babel-integration).

Run

```javascript
npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer
```

Your `package.json` should look something like this (where `<current-version>` is the actual latest version number for the package). Please add the scripts and jest configuration entries:

```javascript
// package.json
  "dependencies": {
    "react": "<current-version>",
    "react-dom": "<current-version>"
  },
  "devDependencies": {
    "babel-jest": "<current-version>",
    "babel-preset-es2015": "<current-version>",
    "babel-preset-react": "<current-version>",
    "jest": "<current-version>",
    "react-test-renderer": "<current-version>"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "automock": false
  }
```

```javascript
// .babelrc
{
  "presets": ["es2015", "react"]
}
```

**And you're good to go!**

React is designed to be tested without being mocked and we recommend turning automocking off using `"automock: false"` in Jest's configuration.

If you'd like to use Jest's automocking feature you can unmock React explicitly:

```javascript
"jest": {
  "unmockedModulePathPatterns": [
    "<rootDir>/node_modules/react/",
    "<rootDir>/node_modules/react-dom/",
    "<rootDir>/node_modules/react-test-renderer/",
    "<rootDir>/node_modules/react-addons-test-utils/"
  ]
}
```

### Snapshot Testing

Snapshot testing was introduced in Jest 14.0. More information on how it works and why we built it can be found on the [release blog post](/jest/blog/2016/07/27/jest-14.html).

Let's build a Link component in React that renders hyperlinks:

```javascript
// Link.react-test.js
import React from 'react';
<commit_msg>File name in comment chnaged (#1496)<commit_after>---
id: tutorial-react
title: Tutorial – React
layout: docs
category: Quick Start
permalink: docs/tutorial-react.html
next: tutorial-react-native
---

At Facebook, we use Jest to test [React](http://facebook.github.io/react/)
applications.

## Setup

We are using the `babel-jest` package and the `react` babel preset to transform our code inside of the test environment. Also see [babel integration](/jest/docs/getting-started.html#babel-integration).

Run

```javascript
npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer
```

Your `package.json` should look something like this (where `<current-version>` is the actual latest version number for the package). Please add the scripts and jest configuration entries:

```javascript
// package.json
  "dependencies": {
    "react": "<current-version>",
    "react-dom": "<current-version>"
  },
  "devDependencies": {
    "babel-jest": "<current-version>",
    "babel-preset-es2015": "<current-version>",
    "babel-preset-react": "<current-version>",
    "jest": "<current-version>",
    "react-test-renderer": "<current-version>"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "automock": false
  }
```

```javascript
// .babelrc
{
  "presets": ["es2015", "react"]
}
```

**And you're good to go!**

React is designed to be tested without being mocked and we recommend turning automocking off using `"automock: false"` in Jest's configuration.

If you'd like to use Jest's automocking feature you can unmock React explicitly:

```javascript
"jest": {
  "unmockedModulePathPatterns": [
    "<rootDir>/node_modules/react/",
    "<rootDir>/node_modules/react-dom/",
    "<rootDir>/node_modules/react-test-renderer/",
    "<rootDir>/node_modules/react-addons-test-utils/"
  ]
}
```

### Snapshot Testing

Snapshot testing was introduced in Jest 14.0. More information on how it works and why we built it can be found on the [release blog post](/jest/blog/2016/07/27/jest-14.html).

Let's build a Link component in React that renders hyperlinks:

```javascript
// Link.react.js
import React from 'react';

{'fraction_non_alphanumeric': 0.14591078066914498, 'fraction_numerical': 0.01254646840148699, 'mean_word_length': 4.14336917562724, 'pattern_counts': {'":': 32, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7209386', 'n_tokens_mistral': 1434, 'n_tokens_neox': 1327, 'n_words': 415}