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 15187a6
Showing 1 changed file with 44 additions and 2 deletions.
46 changes: 44 additions & 2 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 @@ -120,7 +120,49 @@ console.error = (message) => {
};
```

You should then be able to start writing tests!
## 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
/**
* @jest-environment jsdom
*/
import * as React from "react"
import { Text } from "../../../component/text"
import { mount } from "enzyme"

describe("Component tested with airbnb enzyme", () => {

test("App mount with enzyme", () => {
const wrapper = mount(<Text/>)
// other tests operations
})
})
```

**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 15187a6

Please sign in to comment.