Skip to content

Commit

Permalink
[Docs] Add on the fly JSDOM include example
Browse files Browse the repository at this point in the history
  • Loading branch information
loic-lopez authored and ljharb committed Mar 26, 2019
1 parent df7ad40 commit 03ef729
Showing 1 changed file with 39 additions and 12 deletions.
51 changes: 39 additions & 12 deletions docs/guides/react-native.md
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 03ef729

Please sign in to comment.