mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Dan Abramov
617 lines
26 KiB
HTML
617 lines
26 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<!--[if IE]><![endif]-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>Test Utilities - React</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta property="og:title" content="Test Utilities - React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://facebook.github.io/react/docs/test-utils.html">
|
|
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
|
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
|
<meta property="fb:app_id" content="623268441017527">
|
|
|
|
<link rel="shortcut icon" href="/react/favicon.ico">
|
|
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
|
<link rel="stylesheet" href="/react/css/syntax.css">
|
|
<link rel="stylesheet" href="/react/css/codemirror.css">
|
|
<link rel="stylesheet" href="/react/css/react.css">
|
|
|
|
<script src="//use.typekit.net/vqa1hcx.js"></script>
|
|
<script>try{Typekit.load();}catch(e){}</script>
|
|
|
|
<!--[if lte IE 8]>
|
|
<script src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
|
|
<script src="https://unpkg.com/es5-shim@4.5.9/es5-shim.min.js"></script>
|
|
<script src="https://unpkg.com/es5-shim@4.5.9/es5-sham.min.js"></script>
|
|
<![endif]-->
|
|
<script src="https://unpkg.com/docsearch.js@1.5.0/dist/cdn/docsearch.min.js"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2/mode/javascript/javascript.js"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2/mode/xml/xml.js"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2/mode/jsx/jsx.js"></script>
|
|
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
|
|
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
|
|
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
|
|
<script src="https://unpkg.com/create-react-class/create-react-class.min.js"></script>
|
|
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
|
|
<script src="/react/js/live_editor.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="nav-main">
|
|
<div class="wrap">
|
|
<a class="nav-home" href="/react/">
|
|
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
|
React
|
|
</a>
|
|
<div class="nav-lists">
|
|
<ul class="nav-site nav-site-internal">
|
|
<li><a href="/react/docs/hello-world.html" class="active">Docs</a></li>
|
|
<li><a href="/react/tutorial/tutorial.html">Tutorial</a></li>
|
|
<li><a href="/react/community/support.html">Community</a></li>
|
|
<li><a href="/react/blog/">Blog</a></li>
|
|
<li class="nav-site-search">
|
|
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
|
|
</li>
|
|
</ul>
|
|
<ul class="nav-site nav-site-external">
|
|
<li><a href="https://github.com/facebook/react">GitHub</a></li>
|
|
<li><a href="https://github.com/facebook/react/releases">v16.0.0</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<section class="content wrap documentationContent">
|
|
<div class="inner-content">
|
|
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/addons-test-utils.md" target="_blank">Edit on GitHub</a>
|
|
<h1>
|
|
Test Utilities
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<p><strong>Importing</strong></p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">import</span> <span class="nx">ReactTestUtils</span> <span class="nx">from</span> <span class="s1">'react-dom/test-utils'</span><span class="p">;</span> <span class="c1">// ES6</span>
|
|
<span class="kd">var</span> <span class="nx">ReactTestUtils</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react-dom/test-utils'</span><span class="p">);</span> <span class="c1">// ES5 with npm</span>
|
|
</code></pre></div>
|
|
<h2>Overview</h2>
|
|
|
|
<p><code>ReactTestUtils</code> makes it easy to test React components in the testing framework of your choice. At Facebook we use <a href="https://facebook.github.io/jest/">Jest</a> for painless JavaScript testing. Learn how to get started with Jest through the Jest website's <a href="http://facebook.github.io/jest/docs/tutorial-react.html#content">React Tutorial</a>.</p>
|
|
|
|
<blockquote>
|
|
<p>Note:</p>
|
|
|
|
<p>Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components' output. If you're deciding on a unit testing utility to use together with Jest, or any other test runner, it's worth checking out: <a href="http://airbnb.io/enzyme/">http://airbnb.io/enzyme/</a></p>
|
|
</blockquote>
|
|
|
|
<ul>
|
|
<li><a href="#simulate"><code>Simulate</code></a></li>
|
|
<li><a href="#renderintodocument"><code>renderIntoDocument()</code></a></li>
|
|
<li><a href="#mockcomponent"><code>mockComponent()</code></a></li>
|
|
<li><a href="#iselement"><code>isElement()</code></a></li>
|
|
<li><a href="#iselementoftype"><code>isElementOfType()</code></a></li>
|
|
<li><a href="#isdomcomponent"><code>isDOMComponent()</code></a></li>
|
|
<li><a href="#iscompositecomponent"><code>isCompositeComponent()</code></a></li>
|
|
<li><a href="#iscompositecomponentwithtype"><code>isCompositeComponentWithType()</code></a></li>
|
|
<li><a href="#findallinrenderedtree"><code>findAllInRenderedTree()</code></a></li>
|
|
<li><a href="#scryrendereddomcomponentswithclass"><code>scryRenderedDOMComponentsWithClass()</code></a></li>
|
|
<li><a href="#findrendereddomcomponentwithclass"><code>findRenderedDOMComponentWithClass()</code></a></li>
|
|
<li><a href="#scryrendereddomcomponentswithtag"><code>scryRenderedDOMComponentsWithTag()</code></a></li>
|
|
<li><a href="#findrendereddomcomponentwithtag"><code>findRenderedDOMComponentWithTag()</code></a></li>
|
|
<li><a href="#scryrenderedcomponentswithtype"><code>scryRenderedComponentsWithType()</code></a></li>
|
|
<li><a href="#findrenderedcomponentwithtype"><code>findRenderedComponentWithType()</code></a></li>
|
|
</ul>
|
|
|
|
<h2>Reference</h2>
|
|
|
|
<h2>Shallow Rendering</h2>
|
|
|
|
<p>When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.</p>
|
|
|
|
<blockquote>
|
|
<p>Note:</p>
|
|
|
|
<p>The shallow renderer has moved to <code>react-test-renderer/shallow</code>.<br>
|
|
<a href="/react/docs/shallow-renderer.html">Learn more about shallow rendering on its reference page.</a></p>
|
|
</blockquote>
|
|
|
|
<h2>Other Utilities</h2>
|
|
|
|
<h3><code>Simulate</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Simulate</span><span class="p">.{</span><span class="nx">eventName</span><span class="p">}(</span>
|
|
<span class="nx">element</span><span class="p">,</span>
|
|
<span class="p">[</span><span class="nx">eventData</span><span class="p">]</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Simulate an event dispatch on a DOM node with optional <code>eventData</code> event data.</p>
|
|
|
|
<p><code>Simulate</code> has a method for <a href="/react/docs/events.html#supported-events">every event that React understands</a>.</p>
|
|
|
|
<p><strong>Clicking an element</strong></p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// <button ref="button">...</button></span>
|
|
<span class="kr">const</span> <span class="nx">node</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">button</span><span class="p">;</span>
|
|
<span class="nx">ReactTestUtils</span><span class="p">.</span><span class="nx">Simulate</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
|
|
</code></pre></div>
|
|
<p><strong>Changing the value of an input field and then pressing ENTER.</strong></p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// <input ref="input" /></span>
|
|
<span class="kr">const</span> <span class="nx">node</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">input</span><span class="p">;</span>
|
|
<span class="nx">node</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">'giraffe'</span><span class="p">;</span>
|
|
<span class="nx">ReactTestUtils</span><span class="p">.</span><span class="nx">Simulate</span><span class="p">.</span><span class="nx">change</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
|
|
<span class="nx">ReactTestUtils</span><span class="p">.</span><span class="nx">Simulate</span><span class="p">.</span><span class="nx">keyDown</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="s2">"Enter"</span><span class="p">,</span> <span class="nx">keyCode</span><span class="o">:</span> <span class="mi">13</span><span class="p">,</span> <span class="nx">which</span><span class="o">:</span> <span class="mi">13</span><span class="p">});</span>
|
|
</code></pre></div>
|
|
<blockquote>
|
|
<p>Note</p>
|
|
|
|
<p>You will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you.</p>
|
|
</blockquote>
|
|
|
|
<hr>
|
|
|
|
<h3><code>renderIntoDocument()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">renderIntoDocument</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Render a React element into a detached DOM node in the document. <strong>This function requires a DOM.</strong></p>
|
|
|
|
<blockquote>
|
|
<p>Note:</p>
|
|
|
|
<p>You will need to have <code>window</code>, <code>window.document</code> and <code>window.document.createElement</code> globally available <strong>before</strong> you import <code>React</code>. Otherwise React will think it can't access the DOM and methods like <code>setState</code> won't work.</p>
|
|
</blockquote>
|
|
|
|
<hr>
|
|
|
|
<h3><code>mockComponent()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">mockComponent</span><span class="p">(</span>
|
|
<span class="nx">componentClass</span><span class="p">,</span>
|
|
<span class="p">[</span><span class="nx">mockTagName</span><span class="p">]</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple <code><div></code> (or other tag if <code>mockTagName</code> is provided) containing any provided children.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>isElement()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">isElement</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Returns <code>true</code> if <code>element</code> is any React element.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>isElementOfType()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">isElementOfType</span><span class="p">(</span>
|
|
<span class="nx">element</span><span class="p">,</span>
|
|
<span class="nx">componentClass</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Returns <code>true</code> if <code>element</code> is a React element whose type is of a React <code>componentClass</code>.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>isDOMComponent()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">isDOMComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Returns <code>true</code> if <code>instance</code> is a DOM component (such as a <code><div></code> or <code><span></code>).</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>isCompositeComponent()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">isCompositeComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Returns <code>true</code> if <code>instance</code> is a user-defined component, such as a class or a function.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>isCompositeComponentWithType()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">isCompositeComponentWithType</span><span class="p">(</span>
|
|
<span class="nx">instance</span><span class="p">,</span>
|
|
<span class="nx">componentClass</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Returns <code>true</code> if <code>instance</code> is a component whose type is of a React <code>componentClass</code>.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>findAllInRenderedTree()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">findAllInRenderedTree</span><span class="p">(</span>
|
|
<span class="nx">tree</span><span class="p">,</span>
|
|
<span class="nx">test</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Traverse all components in <code>tree</code> and accumulate all components where <code>test(component)</code> is <code>true</code>. This is not that useful on its own, but it's used as a primitive for other test utils.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>scryRenderedDOMComponentsWithClass()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">scryRenderedDOMComponentsWithClass</span><span class="p">(</span>
|
|
<span class="nx">tree</span><span class="p">,</span>
|
|
<span class="nx">className</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching <code>className</code>.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>findRenderedDOMComponentWithClass()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">findRenderedDOMComponentWithClass</span><span class="p">(</span>
|
|
<span class="nx">tree</span><span class="p">,</span>
|
|
<span class="nx">className</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Like <a href="#scryrendereddomcomponentswithclass"><code>scryRenderedDOMComponentsWithClass()</code></a> but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>scryRenderedDOMComponentsWithTag()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">scryRenderedDOMComponentsWithTag</span><span class="p">(</span>
|
|
<span class="nx">tree</span><span class="p">,</span>
|
|
<span class="nx">tagName</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching <code>tagName</code>.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>findRenderedDOMComponentWithTag()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">findRenderedDOMComponentWithTag</span><span class="p">(</span>
|
|
<span class="nx">tree</span><span class="p">,</span>
|
|
<span class="nx">tagName</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Like <a href="#scryrendereddomcomponentswithtag"><code>scryRenderedDOMComponentsWithTag()</code></a> but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>scryRenderedComponentsWithType()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">scryRenderedComponentsWithType</span><span class="p">(</span>
|
|
<span class="nx">tree</span><span class="p">,</span>
|
|
<span class="nx">componentClass</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Finds all instances of components with type equal to <code>componentClass</code>.</p>
|
|
|
|
<hr>
|
|
|
|
<h3><code>findRenderedComponentWithType()</code></h3>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">findRenderedComponentWithType</span><span class="p">(</span>
|
|
<span class="nx">tree</span><span class="p">,</span>
|
|
<span class="nx">componentClass</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Same as <a href="#scryrenderedcomponentswithtype"><code>scryRenderedComponentsWithType()</code></a> but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.</p>
|
|
|
|
<hr>
|
|
|
|
|
|
<div class="docs-prevnext">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-docs">
|
|
<!-- Docs Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Quick Start</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/installation.html">Installation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/hello-world.html">Hello World</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/introducing-jsx.html">Introducing JSX</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/rendering-elements.html">Rendering Elements</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/components-and-props.html">Components and Props</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/state-and-lifecycle.html">State and Lifecycle</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/handling-events.html">Handling Events</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/conditional-rendering.html">Conditional Rendering</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/lists-and-keys.html">Lists and Keys</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/forms.html">Forms</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/lifting-state-up.html">Lifting State Up</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/composition-vs-inheritance.html">Composition vs Inheritance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking In React</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Advanced Guides</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-in-depth.html">JSX In Depth</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/typechecking-with-proptypes.html">Typechecking With PropTypes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/refs-and-the-dom.html">Refs and the DOM</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/uncontrolled-components.html">Uncontrolled Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/optimizing-performance.html">Optimizing Performance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-without-es6.html">React Without ES6</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-without-jsx.html">React Without JSX</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/context.html">Context</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/portals.html">Portals</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/web-components.html">Web Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/higher-order-components.html">Higher-Order Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/integrating-with-other-libraries.html">Integrating with Other Libraries</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/accessibility.html">Accessibility</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-api.html">React</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-component.html">React.Component</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-dom.html">ReactDOM</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-dom-server.html">ReactDOMServer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/dom-elements.html">DOM Elements</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/events.html">SyntheticEvent</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-utils.html" class="active">Test Utilities</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/shallow-renderer.html">Shallow Renderer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-renderer.html">Test Renderer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/javascript-environment-requirements.html">JS Environment Requirements</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<!-- Contributing Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Contributing</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/contributing/how-to-contribute.html">How to Contribute</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/codebase-overview.html">Codebase Overview</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/implementation-notes.html">Implementation Notes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/design-principles.html">Design Principles</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<footer class="nav-footer">
|
|
<section class="sitemap">
|
|
<a href="/react/" class="nav-home">
|
|
</a>
|
|
<div>
|
|
<h5><a href="/react/docs/">Docs</a></h5>
|
|
<a href="/react/docs/hello-world.html">Quick Start</a>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
|
<a href="/react/tutorial/tutorial.html">Tutorial</a>
|
|
<a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
|
|
</div>
|
|
<div>
|
|
<h5><a href="/react/community/support.html">Community</a></h5>
|
|
<a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
|
|
<a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
|
|
<a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
|
|
<a href="https://www.facebook.com/react" target="_blank">Facebook</a>
|
|
<a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
|
|
</div>
|
|
<div>
|
|
<h5><a href="/react/community/support.html">Resources</a></h5>
|
|
<a href="/react/community/conferences.html">Conferences</a>
|
|
<a href="/react/community/videos.html">Videos</a>
|
|
<a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
|
|
<a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
|
|
</div>
|
|
<div>
|
|
<h5>More</h5>
|
|
<a href="/react/blog/">Blog</a>
|
|
<a href="https://github.com/facebook/react" target="_blank">GitHub</a>
|
|
<a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
|
|
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
|
</div>
|
|
</section>
|
|
<a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
|
|
<img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
|
|
</a>
|
|
<section class="copyright">
|
|
Copyright © 2017 Facebook Inc.
|
|
</section>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<div id="fb-root"></div>
|
|
<script src="/react/js/anchor-links.js"></script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
|
|
(function(d, s, id) {
|
|
var js, fjs = d.getElementsByTagName(s)[0];
|
|
if (d.getElementById(id)) return;
|
|
js = d.createElement(s); js.id = id;
|
|
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'facebook-jssdk'));
|
|
|
|
docsearch({
|
|
apiKey: '36221914cce388c46d0420343e0bb32e',
|
|
indexName: 'react',
|
|
inputSelector: '#algolia-doc-search'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|