From 03ef72928fe89bb67e5aae902609a425e3cb5205 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Lopez?= <loic.lopez@epitech.eu>
Date: Tue, 26 Mar 2019 15:13:29 -0400
Subject: [PATCH] [Docs] Add on the fly JSDOM include example

---
 docs/guides/react-native.md | 51 ++++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/docs/guides/react-native.md b/docs/guides/react-native.md
index f34fcdf25..bf6cf44b3 100644
--- a/docs/guides/react-native.md
+++ b/docs/guides/react-native.md
@@ -49,7 +49,7 @@ prop, that can be used a selector similar to `className` in standard React:
 expect(wrapper.findWhere(node => node.prop('testID') === 'todo-item')).toExist();
 ```
 
-## Example configuration for Jest
+## Default example configuration for Jest and JSDOM replacement
 
 To perform the necessary configuration in your testing framework, it is recommended to use a setup script,
 such as with Jest's `setupFilesAfterEnv` setting.
@@ -104,23 +104,50 @@ copyProps(window, global);
  * and inspect the DOM in tests.
  */
 Enzyme.configure({ adapter: new Adapter() });
+```
+
+## Configure enzyme with other test libraries and include JSDOM on the fly
+
+Update the file specified in `setupFilesAfterEnv`, in this case `setup-tests.js` in the project root:
+
+```jsx
+import 'react-native';
+import 'jest-enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Enzyme from 'enzyme';
+
+/**
+ * Set up Enzyme to mount to DOM, simulate events,
+ * and inspect the DOM in tests.
+ */
+Enzyme.configure({ adapter: new Adapter() });
+```
+
+### Create a separate test file
 
+Create a file prefixed with enzyme.test.ts for example `component.enzyme.test.js`:
+
+```jsx
 /**
- * Ignore some expected warnings
- * see: https://jestjs.io/docs/en/tutorial-react.html#snapshot-testing-with-mocks-enzyme-and-react-16
- * see https://github.com/Root-App/react-native-mock-render/issues/6
+ * @jest-environment jsdom
  */
-const originalConsoleError = console.error;
-console.error = (message) => {
-  if (message.startsWith('Warning:')) {
-    return;
-  }
+import React from 'react';
+import { mount } from 'enzyme';
+import { Text } from '../../../component/text';
 
-  originalConsoleError(message);
-};
+describe('Component tested with airbnb enzyme', () => {
+  test('App mount with enzyme', () => {
+    const wrapper = mount(<Text />);
+    // other tests operations
+  });
+});
 ```
 
-You should then be able to start writing tests!
+**The most important part is to ensure that the test runs with the `jestEnvironment` set to `jsdom`** - one way is to include a `/* @jest-environment jsdom */` comment at the top of the file.
+
+
+
+Then you should then be able to start writing tests!
 
 Note that you may want to perform some additional mocking around native components,
 or if you want to perform snapshot testing against React Native components. Notice