Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] Add docs reflecting v3 #1121

Merged
merged 7 commits into from Sep 26, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
62 changes: 62 additions & 0 deletions CONTRIBUTING.md
Expand Up @@ -69,6 +69,68 @@ codebase, however you can always check to see if the source code is compliant by
npm run lint
```

### Publishing

Enzyme uses [lerna](https://github.com/lerna/lerna) to structure its repo, and has multiple packages
to publish out of this one repo. We use lerna's "independent" mode, which means that the versioning
of each package in the repo is versioned independently.

We are waiting on [this issue](https://github.com/lerna/lerna/issues/955) to be fixed, so that
`peerDependencies` do not get updated with patch updates.

Until this issue is fixed, we will publish each package manually instead of with `lerna publish`. In
order to do this, we will:

For enzyme:

```bash
# ... update version in enzyme/package.json, make changes to CHANGELOG, etc.
cd packages/enzyme
git commit -m v{version}
git tag -a -m v{version}
git push --follow-tags
npm publish
```

For other packages

```bash
# ... update version in {package}/package.json, make changes to CHANGELOG, etc.
cd packages/{package}
git commit -m "{package}: v{version}"
git tag -a -m "{package}: v{version}"
git push --follow-tags
npm publish
```

Once we are able to use `lerna publish`, the process will be as follows:

Lerna by default will only publish packages that have changed since the last release. It will also
create a tagged commit for each release.

To publish, run:

```bash
lerna publish -m "{tag name}"
```

The tag name is determined by the `-m` CLI option. If `enzyme` is one of the packages that has
updates, we default to just using that version as the tag name. For instance, when publishing
`enzyme@3.1.1` and `enzyme-adapter-react-16@1.2.3` we would run:

```bash
lerna publish -m "v3.1.1"
```

If `enzyme` is *not* one of the packages being updated, use the other package's name and the version:

```bash
lerna publish -m "enzyme-adapter-react-16: v1.2.3"
```

The `lerna publish` command will present interactive prompts asking which version to use for each
package independently. Just choose whichever


### Building Docs

Expand Down
85 changes: 58 additions & 27 deletions README.md
Expand Up @@ -7,13 +7,70 @@ Enzyme
[![Discord Channel](https://img.shields.io/badge/discord-testing@reactiflux-738bd7.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bY8vNTA)



Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate,
and traverse your React Components' output.

Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation
and traversal.

Upgrading from Enzyme 2.x or React < 16
===========

Are you here to check whether or not Enzyme is compatible with React 16? Are you currently using
Enzyme 2.x? Great! Check out our [migration guide](/docs/guides/migration-from-2-to-3.md) for help
moving on to Enzyme v3 where React 16 is supported.

### [Installation](/docs/installation/README.md)

To get started with enzyme, you can simply install it via npm. You will need to install enzyme
along with an Adapter corresponding to the version of react (or other UI Component library) you
are using. For instance, if you are using enzyme with React 16, you can run:

```bash
npm i --save-dev enzyme enzyme-adapter-react-16
```

Each adapter may have additional peer dependencies which you will need to install as well. For instance,
`enzyme-adapter-react-16` has peer dependencies on `react`, `react-dom`, and `react-test-renderer`.

At the moment, Enzyme has adapters that provide compatibility with `React 16.x`, `React 15.x`,
`React 0.14.x` and `React 0.13.x`.

The following adapters are officially provided by enzyme, and have the following compatibility with
React:

| Enzyme Adapter Package | React semver compatibility |
| --- | --- |
| `enzyme-adapter-react-16` | `^16.0.0` |
| `enzyme-adapter-react-15` | `^15.5.0` |
| `enzyme-adapter-react-15.4` | `15.0.0-0 - 15.4.x` |
| `enzyme-adapter-react-14` | `^0.14.0` |
| `enzyme-adapter-react-13` | `^0.13.0` |

Finally, you need to configure enzyme to use the adapter you want it to use. To do this, you can use
the top level `configure(...)` API.

```js
import Enzyme from 'enzyme';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we make import { configure } from 'enzyme' also work, even if it's not in the docs?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ljharb it does work

import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it seems kind of weird that adapters need to be constructed; could adapter take a constructor instead of an instance perhaps?

```

3rd Party Adapters
=============

It is possible for the community to create additional (non-official) adapters that will make enzyme
work with other libraries. If you have made one and it's not included in the list below, feel free
to make a PR to this README and add a link to it! The known 3rd party adapters are:

| Adapter Package | For Library | Status |
| --- | --- | --- |
| [`preact-enzyme-adapter`](https://github.com/aweary/preact-enzyme-adapater) | [`preact`](https://github.com/developit/preact) | (work in progress) |

Running Enzyme Tests
===========

Enzyme is unopinionated regarding which test runner or assertion library you use, and should be
compatible with all major test runners and assertion libraries out there. The documentation and
examples for enzyme use [mocha](https://mochajs.org/) and [chai](http://chaijs.com/), but you
Expand Down Expand Up @@ -49,32 +106,6 @@ testing your React components, you can consider using:

[Using Enzyme with Tape and AVA](/docs/guides/tape-ava.md)

### [Installation](/docs/installation/README.md)

To get started with enzyme, you can simply install it with npm:

```bash
npm i --save-dev enzyme
```

Enzyme is currently compatible with `React 15.x`, `React 0.14.x` and `React 0.13.x`. In order to
achieve this compatibility, some dependencies cannot be explicitly listed in our `package.json`.

If you are using `React 0.14` or `React <15.5`, in addition to `enzyme`, you will have to ensure that
you also have the following npm modules installed if they were not already:

```bash
npm i --save-dev react-addons-test-utils react-dom
```

If you are using `React >=15.5`, in addition to `enzyme`, you will have to ensure that you also have
the following npm modules installed if they were not already:

```bash
npm i --save-dev react-test-renderer react-dom
```


Basic Usage
===========

Expand Down
7 changes: 4 additions & 3 deletions SUMMARY.md
Expand Up @@ -2,6 +2,7 @@

* [Introduction](/README.md)
* [Guides](/docs/guides.md)
* [Migration from 2.x to 3.x](/docs/guides/migration-from-2-to-3.md)
* [Browserify](/docs/guides/browserify.md)
* [WebPack](/docs/guides/webpack.md)
* [JSDOM](/docs/guides/jsdom.md)
Expand All @@ -12,9 +13,10 @@
* [Lab](/docs/guides/lab.md)
* [Tape and AVA](/docs/guides/tape-ava.md)
* [Installation](/docs/installation/README.md)
* [Working with React 0.13.x](/docs/installation/react-013.md)
* [Working with React 0.14.x](/docs/installation/react-014.md)
* [Working with React 16.x](/docs/installation/react-16.md)
* [Working with React 15.x](/docs/installation/react-15.md)
* [Working with React 0.14.x](/docs/installation/react-014.md)
* [Working with React 0.13.x](/docs/installation/react-013.md)
* [API Reference](/docs/api/README.md)
* [Shallow Rendering](/docs/api/shallow.md)
* [at(index)](/docs/api/ShallowWrapper/at.md)
Expand Down Expand Up @@ -130,5 +132,4 @@
* [Selectors](/docs/api/selector.md)
* [Change Log](/CHANGELOG.md)
* [Future](/docs/future.md)
* [Adapter & Compatibility Proposal](/docs/future/compatibility.md)
* [Contributing Guide](/CONTRIBUTING.md)
2 changes: 1 addition & 1 deletion docs/api/render.md
@@ -1,6 +1,6 @@
# Static Rendering API

Enzyme's `render` function is used to render react components to static HTML and analyze the
enzyme's `render` function is used to render react components to static HTML and analyze the
resulting HTML structure.

`render` returns a wrapper very similar to the other renderers in enzyme, [`mount`](mount.md) and
Expand Down
14 changes: 7 additions & 7 deletions docs/api/selector.md
@@ -1,12 +1,12 @@
# Enzyme Selectors
# enzyme Selectors

Many methods in Enzyme's API accept a *selector* as an argument. Selectors in Enzyme can fall into
Many methods in enzyme's API accept a *selector* as an argument. Selectors in enzyme can fall into
one of the following four categories:


### 1. A Valid CSS Selector

Enzyme supports a subset of valid CSS selectors to find nodes inside a render tree. Support is as
enzyme supports a subset of valid CSS selectors to find nodes inside a render tree. Support is as
follows:

- class syntax (`.foo`, `.foo-bar`, etc.)
Expand Down Expand Up @@ -40,7 +40,7 @@ input#input-name
label[foo=true]
```

Enzyme also gives support for the following contextual selectors
enzyme also gives support for the following contextual selectors

```
.foo .bar
Expand All @@ -60,7 +60,7 @@ enzyme that will likely be focused on in the future.

### 2. A React Component Constructor

Enzyme allows you to find components based on their constructor. You can pass in the reference to
enzyme allows you to find components based on their constructor. You can pass in the reference to
the component's constructor:

```jsx
Expand All @@ -76,7 +76,7 @@ const myComponents = wrapper.find(MyComponent);

### 3. A React Component's displayName

Enzyme allows you to find components based on a component's `displayName`. If a component exists
enzyme allows you to find components based on a component's `displayName`. If a component exists
in a render tree where its `displayName` is set and has its first character as a capital letter,
a string can be used to find it:

Expand All @@ -99,7 +99,7 @@ selector using the tag syntax.

### 4. Object Property Selector

Enzyme allows you to find components and nodes based on a subset of their properties:
enzyme allows you to find components and nodes based on a subset of their properties:


```jsx
Expand Down
46 changes: 4 additions & 42 deletions docs/common-issues.md
Expand Up @@ -2,44 +2,6 @@

This list aims to be comprehensive. If you find an issue that has been frequently brought up in Github *issues* that is not here, please open a PR to add it.

### Webpack Build Issues

- [Related Github issue](https://github.com/airbnb/enzyme/issues/684)

###### Common Solutions

_Mismatched versions of React and React* libraries._

It is important to ensure all React and React* libraries your project depend on are matching versions.
If you are using React 15.4.0, you should ensure your React* libraries (like react-test-utils) are equivalently on 15.4.0.

_Bad configuration._

Please see the guide for [webpack](/docs/guides/webpack) to ensure your configuration is correct for weback.

### Error: Cannot find module 'react-dom/lib/ReactTestUtils'

- [Related Github issue](https://github.com/airbnb/enzyme/issues/684)
- [Related code](https://github.com/airbnb/enzyme/blob/3aeb02461eabf2fd402613991915d8d6f4b88536/src/react-compat.js#L97-L105)

###### Reason

In order to properly support multiple versions of React, we have conditional requirements that npm does not support with tools like
`peerDependencies`. Instead we manually require and throw errors if the dependency is not met.

###### Solution

Install a matching version of React for `react-test-utils`. Example package.json

```json
{
"devDependencies": {
"react": "15.4.0",
"react-test-utils": "15.4.0"
}
}
```

### Query Selector fails

###### Reason
Expand All @@ -50,13 +12,13 @@ selectors we currently support: https://github.com/airbnb/enzyme/blob/master/doc

### Testing third party libraries

Some third party libraries are difficult or impossible to test. Enzyme's scope is severly limited to what
React exposes and provides for us. Things like "portals" are not currently testable with Enzyme directly for that reason.
Some third party libraries are difficult or impossible to test. enzyme's scope is severly limited to what
React exposes and provides for us. Things like "portals" are not currently testable with enzyme directly for that reason.

An example:

If you are testing a library that creates a Modal, and it manually appends it to a different part of the DOM, React has lost
track of this component, and therefore Enzyme has also lost track of it.
track of this component, and therefore enzyme has also lost track of it.

Even more so, if this library appends dom elements into react components, react still does not know about it. A library like d3 which
appends DOM elements would be an example here.
Expand All @@ -66,7 +28,7 @@ appends DOM elements would be an example here.
You can use the `render` API to attempt to access and assert on the appended DOM components. This will likely become natively supported
when React natively supports Portals, which is expected to land with Fiber.

If the third party solution lets you attach a `ref`, that would be the ideal scenario. With a `ref` you can then get that element from Enzyme.
If the third party solution lets you attach a `ref`, that would be the ideal scenario. With a `ref` you can then get that element from enzyme.

example

Expand Down
16 changes: 2 additions & 14 deletions docs/future.md
Expand Up @@ -3,22 +3,10 @@
Discussion of additional features and support for enzyme should be initiated by opening a
[Github issue](https://github.com/airbnb/enzyme/issues).

There are several things we'd like to address with Enzyme that often get asked. Here are a couple
There are several things we'd like to address with enzyme that often get asked. Here are a couple
of projects that we plan on addressing in the near future:


### Enzyme Adapter & Compatibility

[See the full proposal](future/compatibility.md)


#### Improved CSS Selector Support

Currently, "hierarchical" CSS selectors are not supported in Enzyme. That means that the only CSS
selectors that can be used right now are those that operate on a specific node. As time progresses
we would like to provide a more complete subset of all valid CSS selectors.


#### Improved event simulation and propagation support

Event simulation is limited for Shallow rendering. Event propagation is not supported, and one must
Expand All @@ -29,5 +17,5 @@ interaction.
### Improved Keyboard + Mouse Simulation

Many react components involve simulating form input or complex mouse interaction. Simulating this
using the event simulation API that Enzyme provides is cumbersome and impractical. We are looking for
using the event simulation API that enzyme provides is cumbersome and impractical. We are looking for
an expressive way to solve this problem, even if it is a library that lives outside of enzyme.