Skip to content

Commit

Permalink
Rip out sinon, mocha, and jsdom dependencies
Browse files Browse the repository at this point in the history
This refactor addresses several issues regarding enzyme working in a variety of environments, and
the library just generally not making any assumptions about the environment that tests will be
run in.

For the most part, this amounts to:

- remove direct dependency on jsdom
- remove direct dependency on sinon
- remove assumed dependency on mocha

In addition to this, I would like to create several "example" projects that are some basic boilerplate
to getting enzyme up and running with some combination of bundler/test runner/etc.  These projects
can end up being devDependencies to enzyme and we can run their tests as part of our tests, which will
ensure that changes we make to enzyme will be compatible with environments we claim to support moving
forward.

Lastly, as a matter of organization, tests have been moved from `src/__tests__/*` to `tests/*`.

Left to do for this to be mergable is:

  [ ] Add a "guides" section in the docs explaining how to use enzyme in different environments
  [ ] Add example projects as dev dependencies, include their tests in enzyme's test script
  • Loading branch information
lelandrichardson committed Feb 10, 2016
1 parent ec1c559 commit 219e50a
Show file tree
Hide file tree
Showing 28 changed files with 542 additions and 303 deletions.
65 changes: 51 additions & 14 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,30 +1,67 @@
language: node_js
node_js:
- "5.1"
- "5.0"
- "4.2"
- "4.1"
- "4.0"
- "iojs-v3.3"
- "5"
- "4"
- "iojs"
- "0.12"
- "0.11"
- "0.10"
before_install:
- 'if [ "${TRAVIS_NODE_VERSION}" != "0.9" ]; then case "$(npm --version)" in 1.*) npm install -g npm@1.4.28 ;; 2.*) npm install -g npm@2 ;; esac ; fi'
- 'if [ "${TRAVIS_NODE_VERSION}" != "0.6" ] && [ "${TRAVIS_NODE_VERSION}" != "0.9" ]; then npm install -g npm; fi'
before_script: "sh install-relevant-react.sh"
script:
- 'if [ "${TRAVIS_NODE_VERSION}" = "4.2" ]; then npm run lint && npm run travis ; elif [ "${TRAVIS_NODE_VERSION}" = "0.12" ]; then npm run travis ; else npm test ; fi'
- 'if [ -z "$REACT" ] && [ "${TRAVIS_NODE_VERSION}" = "4" ]; then npm run test:env -- "${EXAMPLE}" ; elif [ -z "$REACT" ]; then echo "Test Skipped" ; elif [ "${TRAVIS_NODE_VERSION}" = "4" ]; then npm run lint && npm run travis ; elif [ "${TRAVIS_NODE_VERSION}" = "0.12" ]; then npm run travis ; else npm test ; fi'
after_script:
- 'if [ "${TRAVIS_NODE_VERSION}" = "4.2" ] || [ "${TRAVIS_NODE_VERSION}" = "0.12" ]; then cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
- 'if [ "${TRAVIS_NODE_VERSION}" = "4" ] || [ "${TRAVIS_NODE_VERSION}" = "0.12" ]; then cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
env:
- REACT=0.13
- REACT=0.14
- EXAMPLE=mocha
- EXAMPLE=karma
- EXAMPLE=react-native
- EXAMPLE=karma-webpack
- EXAMPLE=jest
sudo: false
matrix:
fast_finish: true
allow_failures:
- node_js: "5.0"
- node_js: "4.1"
- node_js: "4.0"
- node_js: "0.11"
exclude:
- node_js: "4"
env: EXAMPLE=mocha
- node_js: "4"
env: EXAMPLE=karma
- node_js: "4"
env: EXAMPLE=react-native
- node_js: "4"
env: EXAMPLE=karma-webpack
- node_js: "4"
env: EXAMPLE=jest
- node_js: "iojs"
env: EXAMPLE=mocha
- node_js: "iojs"
env: EXAMPLE=karma
- node_js: "iojs"
env: EXAMPLE=react-native
- node_js: "iojs"
env: EXAMPLE=karma-webpack
- node_js: "iojs"
env: EXAMPLE=jest
- node_js: "0.12"
env: EXAMPLE=mocha
- node_js: "0.12"
env: EXAMPLE=karma
- node_js: "0.12"
env: EXAMPLE=react-native
- node_js: "0.12"
env: EXAMPLE=karma-webpack
- node_js: "0.12"
env: EXAMPLE=jest
- node_js: "0.10"
env: EXAMPLE=mocha
- node_js: "0.10"
env: EXAMPLE=karma
- node_js: "0.10"
env: EXAMPLE=react-native
- node_js: "0.10"
env: EXAMPLE=karma-webpack
- node_js: "0.10"
env: EXAMPLE=jest
48 changes: 33 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,16 @@ If you are interested in using enzyme with custom Chai.js assertions and conveni
testing your React components, you can consider using [chai-enzyme](https://github.com/producthunt/chai-enzyme).


[Using Enzyme with Mocha](/docs/guides/mocha.md)
[Using Enzyme with Karma](/docs/guides/karma.md)
[Using Enzyme with Jasmine](/docs/guides/jasmine.md)
[Using Enzyme with Browserify](/docs/guides/browserify.md)
[Using Enzyme with WebPack](/docs/guides/webpack.md)
[Using Enzyme with JSDOM](/docs/guides/jsdom.md)
[Using Enzyme with React Native](/docs/guides/react-native.md)
[Using Enzyme with Jest](/docs/guides/jest.md)


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

To get started with enzyme, you can simply install it with npm:
Expand All @@ -46,6 +56,7 @@ Basic Usage
## [Shallow Rendering](/docs/api/shallow.md)

```jsx
import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';

Expand Down Expand Up @@ -86,22 +97,14 @@ Read the full [API Documentation](/docs/api/shallow.md)



## [JSDOM Full Rendering](/docs/api/mount.md)
## [Full DOM Rendering](/docs/api/mount.md)

```jsx
import {
describeWithDOM,
mount,
spyLifecycle,
} from 'enzyme';

describeWithDOM('<Foo />', () => {
import React from 'react';
import sinon from 'sinon';
import { mount } from 'enzyme';

it('calls componentDidMount', () => {
spyLifecycle(Foo);
const wrapper = mount(<Foo />);
expect(Foo.prototype.componentDidMount.calledOnce).to.equal(true);
});
describe('<Foo />', () => {

it('allows us to set props', () => {
const wrapper = mount(<Foo bar="baz" />);
Expand All @@ -118,6 +121,13 @@ describeWithDOM('<Foo />', () => {
wrapper.find('button').simulate('click');
expect(onButtonClick.calledOnce).to.equal(true);
});

it('calls componentDidMount', () => {
sinon.spy(Foo.prototype, 'componentDidMount');
const wrapper = mount(<Foo />);
expect(Foo.prototype.componentDidMount.calledOnce).to.be.true;
Foo.prototype.componentDidMount.restore();
});

});
```
Expand All @@ -128,6 +138,7 @@ Read the full [API Documentation](/docs/api/mount.md)
## [Static Rendered Markup](/docs/api/render.md)

```jsx
import React from 'react';
import { render } from 'enzyme';

describe('<Foo />', () => {
Expand All @@ -148,9 +159,16 @@ describe('<Foo />', () => {
Read the full [API Documentation](/docs/api/render.md)


### [Future](/docs/future.md)
### Future

[Enzyme Future](/docs/future.md)


### Contributing

See the [Contributors Guide](/CONTRIBUTING.md)


### [Contributing](/CONTRIBUTING.md)

### License

Expand Down
9 changes: 8 additions & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
## Table of Contents

* [Introduction](/README.md)
* [Guides](/docs/guides.md)
* [Browserify](/docs/guides/browserify.md)
* [WebPack](/docs/guides/webpack.md)
* [JSDOM](/docs/guides/jsdom.md)
* [Jest](/docs/guides/jest.md)
* [Karma](/docs/guides/karma.md)
* [Mocha](/docs/guides/mocha.md)
* [React Native](/docs/guides/react-native.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 jsDom](/docs/installation/jsdom.md)
* [API Reference](/docs/api/README.md)
* [Shallow Rendering](/docs/api/shallow.md)
* [find(selector)](/docs/api/ShallowWrapper/find.md)
Expand Down
7 changes: 5 additions & 2 deletions docs/api/mount.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@ Full DOM rendering is ideal for use cases where you have components that may int
or may require the full lifecycle in order to fully test the component (ie, `componentDidMount`
etc.)

Full DOM rendering depends on a library called [jsdom](https://github.com/tmpvar/jsdom) which is
essentially a headless browser implemented completely in JS.
Full DOM rendering requires that a full DOM API be available at the global scope. This means that
it must be run in an environment that at least "looks like" a browser environment. If you do not
want to run your tests inside of a browser, the recommended approach to using `mount` is to depend
on a library called [jsdom](https://github.com/tmpvar/jsdom) which is essentially a headless browser
implemented completely in JS.

```jsx
import { mount } from 'enzyme';
Expand Down
13 changes: 7 additions & 6 deletions docs/future.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,6 @@ There are several things we'd like to address with Enzyme that often get asked.
of projects that we plan on addressing in the near future:


#### React Native Support

We would like to have enzyme provide full support for react components created with React Native,
and potentially some RN-specific methods to facilitate testing there.


#### Improved CSS Selector Support

Currently, "hierarchical" CSS selectors are not supported in Enzyme. That means that the only CSS
Expand All @@ -25,3 +19,10 @@ we would like to provide a more complete subset of all valid CSS selectors.
Event simulation is limited for Shallow rendering. Event propagation is not supported, and one must
supply their own event objects. We would like to provide tools to more fully simulate real
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
an expressive way to solve this problem, even if it is a library that lives outside of enzyme.
9 changes: 9 additions & 0 deletions docs/guides.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Enzyme Guides

- [*Using Enzyme with Browserify*](guides/browserify.md)
- [*Using Enzyme with WebPack*](guides/webpack.md)
- [*Using Enzyme with JSDOM*](guides/jsdom.md)
- [*Using Enzyme with React Native*](guides/react-native.md)
- [*Using Enzyme with Jest*](guides/jest.md)
- [*Using Enzyme with Karma*](guides/karma.md)
- [*Using Enzyme with Mocha*](guides/mocha.md)
50 changes: 50 additions & 0 deletions docs/guides/browserify.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Using Enzyme with Browserify

If you are using a test runner that runs code in a browser-based environment, you may be using
[browserify]() in order to bundle your React code.

Browserify uses static analysis to create a dependency graph at build-time of your source code to
build a bundle. Enzyme has a hand full of conditional `require()` calls in it in order to remain
compatible with React 0.13 and React 0.14.

Unfortunately, these conditional requires mean there is a bit of extra setup with bundlers like
browserify.

In your browserify configuration, you simply need to make sure that the following two files are
labeled as "external", which means they will be ignored:

```
react/lib/ReactContext
react/lib/ExecutionEnvironment
```

Here is an example piece of configuration code marking these as external:

```js
var browserify = require('browserify');

var b = browserify();

// make sure to mark these as external!
b.external('react/lib/ReactContext');
b.external('react/lib/ExecutionEnvironment');

// the rest of your browserify configuration
```


## React 0.13 Compatibility

If you are using React 0.13, the instructions above will be the same but with a different list of
externals:

```
react-dom
react-dom/server
react-addons-test-utils
```


## Example Projects

- [enzyme-example-karma](https://github.com/lelandrichardson/enzyme-example-karma)
32 changes: 32 additions & 0 deletions docs/guides/jest.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# Using Jest with Enzyme

If you are using Jest with enzyme and using Jest's "automocking" feature, you will need to mark
several modules to be unmocked in your `package.json`:

```js
/* package.json */

"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"react",
"react-dom",
"react-addons-test-utils",
"fbjs",
"enzyme",
"cheerio",
"htmlparser2",
"underscore",
"lodash",
"domhandler",
"object.assign",
"define-properties",
"function-bind",
"object-keys"
]
}
```

## Example Projects

- [enzyme-example-ject](https://github.com/lelandrichardson/enzyme-example-jest)
Loading

0 comments on commit 219e50a

Please sign in to comment.