Merge pull request #2554 from kierenhughes/docs/unit-testing

docs: add docs for unit testing custom views

docs/UnitTesting.md

@@ -0,0 +1,48 @@
+---
+layout: default
+title: "Unit Testing"
+---
+
+# Unit Testing
+
+## Testing custom create and edit views
+
+When creating your customised create and edit views you may want to unit test those views.
+
+One issue you may run into when attempting to render your component via enzyme, is that you need to provide the component with the expected props contained within the react-admin redux store.
+
+Luckily, react-admin provides access to a `TestContext` wrapper component that can be used to initialise your component with many of the expected react-admin props:
+
+```jsx
+import React from 'react';
+import { TestContext } from 'ra-core';
+import { mount } from 'enzyme';
+import MyCustomEditView from './my-custom-edit-view';
+
+describe('MyCustomEditView', () => {
+    let myCustomEditView;
+
+    beforeEach(() => {
+        const defaultEditProps = {
+            basePath: '/',
+            id: '123',
+            resource: 'foo',
+            location: {},
+            match: {},
+        };
+
+        myCustomEditView = mount(
+            <TestContext>
+                <MyCustomEditView {...defaultEditProps} />
+            </TestContext>
+        );
+    });
+
+    // Tests
+});
+```
+
+You can then provide additional props, as needed, to your component (such as the `defaultEditProps` provided above).
+
+At this point, your component should `mount` without errors and you can unit test your component.
+

docs/_layouts/default.html

@@ -792,15 +792,21 @@
                         </a>
                     </li>
 
+                    <li class="chapter {% if page.path == 'UnitTesting.md' %}active{% endif %}">
+                        <a href="./UnitTesting.html">
+                            <b>20.</b> Unit Testing
+                        </a>
+                    </li>
+
                     <li class="chapter {% if page.path == 'AdvancedTutorials.md' %}active{% endif %}">
                         <a href="./AdvancedTutorials.html">
-                            <b>20.</b> Advanced tutorials
+                            <b>21.</b> Advanced tutorials
                         </a>
                     </li>
 
                     <li class="chapter {% if page.path == 'Labs.md' %}active{% endif %}">
                         <a href="./Labs.html">
-                            <b>21.</b> Labs
+                            <b>22.</b> Labs
                         </a>
                     </li>
                 </ul>