Updated docs for 0.33

This commit is contained in:
Website Deployment Script committed 2016-09-09 14:44:33 +00:00
1 parent 0a88fab702
commit 5ea7e40aee
125 files changed
+516 -394

No files matched your search

+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Testing – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Testing – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.32</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:0;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:0;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:0;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:0;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/using-a-listview.html">Using a ListView</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:0;" class="" href="docs/using-navigators.html">Using Navigators</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="active" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigation.html">Navigation</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html">Native Modules</a></li><li><a style="margin-left:0;" claLine truncated
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Testing – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Testing – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.33</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:0;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:0;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:0;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:0;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/using-a-listview.html">Using a ListView</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:0;" class="" href="docs/using-navigators.html">Using Navigators</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="active" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigation.html">Navigation</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html">Native Modules</a></li><li><a style="margin-left:0;" claLine truncated
$ <span class="token punctuation">.</span><span class="token operator">/</span>scripts<span class="token operator">/</span>run<span class="token operator">-</span>android<span class="token operator">-</span>local<span class="token operator">-</span>unit<span class="token operator">-</span>tests<span class="token punctuation">.</span>sh</div><h2><a class="anchor" name="integration-tests-android"></a>Integration tests (Android) <a class="hash-link" href="docs/testing.html#integration-tests-android">#</a></h2><p>React Native uses the <a href="https://buckbuild.com/setup/install.html" target="_blank">Buck build tool</a> to run tests. Integration tests run on an emulator / device and verify that modules and components, as well as the core parts of React Native (such as the bridge) work well end-to-end.</p><p>Make sure you have the path to the Android NDK set up, see <a href="/react-native/docs/android-building-from-source.html#prerequisites" target="">Prerequisites</a>.</p><p>To run the tests:</p><div class="prism language-javascript">$ cd react<span class="token operator">-</span>native
$ npm install
$ <span class="token punctuation">.</span><span class="token operator">/</span>scripts<span class="token operator">/</span>run<span class="token operator">-</span>android<span class="token operator">-</span>local<span class="token operator">-</span>integration<span class="token operator">-</span>tests<span class="token punctuation">.</span>sh</div><h2><a class="anchor" name="integration-tests-ios"></a>Integration Tests (iOS) <a class="hash-link" href="docs/testing.html#integration-tests-ios">#</a></h2><p>React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are <code>RCTTestRunner</code> and <code>RCTTestModule</code>. <code>RCTTestRunner</code> sets up the ReactNative environment and provides facilities to run the tests as <code>XCTestCase</code>s in Xcode (<code>runTest:module</code> is the simplest method). <code>RCTTestModule</code> is exported to JS as <code>NativeModules.TestModule</code>. The tests themselves are written in JS, and must call <code>TestModule.markTestCompleted()</code> when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing a JS exception. It is also possible to test error conditions with <code>runTest:module:initialProps:expectErrorRegex:</code> or <code>runTest:module:initialProps:expectErrorBlock:</code> which will expect an error to be thrown and verify the error matches the provided criteria. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js" target="_blank"><code>IntegrationTestHarnessTest.js</code></a>, <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m" target="_blank"><code>UIExplorerIntegrationTests.m</code></a>, and <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js" target="_blank">IntegrationTestsApp.js</a> for example usage and integration points.</p><p>You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode.</p><h2><a class="anchor" name="screenshot-snapshot-tests-ios"></a>Screenshot/Snapshot Tests (iOS) <a class="hash-link" href="docs/testing.html#screenshot-snapshot-tests-ios">#</a></h2><p>A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case" target="_blank"><code>FBSnapshotTestCase</code></a> library behind the scenes. Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it&#x27;s recommended that you enforce tests are run with the correct configuration. It&#x27;s also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js" target="_blank"><code>SimpleSnapshotTest</code></a> for a basic example.</p><p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you&#x27;ll need to re-record the snapshot reference image. To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m#L42" target="_blank">UIExplorer/UIExplorerSnapshotTests.m</a>, re-run the failing tests, then flip record back to <code>NO</code> and submit/update your PR and wait to see if the Travis build passes.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/debugging.html#content">← Prev</a><a class="docs-next" href="docs/javascript-environment.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Testing.md">edit the content above on GitHub</a> and send us a pull request!</p><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
@@ -17,6 +17,6 @@ $ <span class="token punctuation">.</span><span class="token operator">/</span>s
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
algoliaOptions: { facetFilters: [ "tags:0.32" ], hitsPerPage: 5 }
algoliaOptions: { facetFilters: [ "tags:0.33" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script></body></html>