diff --git a/docs/api/render.md b/docs/api/render.md index cfb666bea..394c0b285 100644 --- a/docs/api/render.md +++ b/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 diff --git a/docs/api/selector.md b/docs/api/selector.md index 4e7779aad..3d072357a 100644 --- a/docs/api/selector.md +++ b/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.) @@ -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 @@ -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 @@ -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: @@ -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 diff --git a/docs/common-issues.md b/docs/common-issues.md index 35137c29b..7dc295d13 100644 --- a/docs/common-issues.md +++ b/docs/common-issues.md @@ -12,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. @@ -28,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 diff --git a/docs/future.md b/docs/future.md index d76f2c480..091f649ea 100644 --- a/docs/future.md +++ b/docs/future.md @@ -3,7 +3,7 @@ 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: @@ -17,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. diff --git a/docs/guides.md b/docs/guides.md index 78db45470..5012fc7c2 100644 --- a/docs/guides.md +++ b/docs/guides.md @@ -1,11 +1,11 @@ -# Enzyme Guides +# 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 Jest*](guides/jest.md) -- [*Using Enzyme with Karma*](guides/karma.md) -- [*Using Enzyme with Mocha*](guides/mocha.md) -- [*Using Enzyme with React Native*](guides/react-native.md) -- [*Using Enzyme with Lab*](guides/lab.md) -- [*Using Enzyme with Tape and AVA*](guides/tape-ava.md) +- [*Using enzyme with Browserify*](guides/browserify.md) +- [*Using enzyme with WebPack*](guides/webpack.md) +- [*Using enzyme with JSDOM*](guides/jsdom.md) +- [*Using enzyme with Jest*](guides/jest.md) +- [*Using enzyme with Karma*](guides/karma.md) +- [*Using enzyme with Mocha*](guides/mocha.md) +- [*Using enzyme with React Native*](guides/react-native.md) +- [*Using enzyme with Lab*](guides/lab.md) +- [*Using enzyme with Tape and AVA*](guides/tape-ava.md) diff --git a/docs/guides/browserify.md b/docs/guides/browserify.md index 3b66a25b7..75e351c96 100644 --- a/docs/guides/browserify.md +++ b/docs/guides/browserify.md @@ -1,9 +1,9 @@ -# Using Enzyme with Browserify +# Using enzyme with Browserify If you are using a test runner that runs code in a browser-based environment, you may be using [browserify](http://browserify.org/) in order to bundle your React code. -Prior to Enzyme 3.0 there were some issues with conditional requires that were used -to maintain backwards compatibility with React versions. With Enzyme 3.0+, this +Prior to enzyme 3.0 there were some issues with conditional requires that were used +to maintain backwards compatibility with React versions. With enzyme 3.0+, this should no longer be an issue. If it is, please file a GitHub issue or make a PR to this documentation with instructions on how to set it up. diff --git a/docs/guides/jest.md b/docs/guides/jest.md index ef6351ba0..fa4347dbb 100644 --- a/docs/guides/jest.md +++ b/docs/guides/jest.md @@ -1,10 +1,10 @@ -# Using Jest with Enzyme +# Using Jest with enzyme ## Jest version 15 and up -Starting with version 15, Jest [no longer mocks modules by default](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html). Because of this, you no longer have to add _any_ special configuration for Jest to use it with Enzyme. +Starting with version 15, Jest [no longer mocks modules by default](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html). Because of this, you no longer have to add _any_ special configuration for Jest to use it with enzyme. -Install Jest, and its Babel integrations, as recommended in the [Jest docs](https://facebook.github.io/jest/docs/getting-started.html). Install Enzyme. Then, simply require/import React, Enzyme functions, and your module at the top of a test file. +Install Jest, and its Babel integrations, as recommended in the [Jest docs](https://facebook.github.io/jest/docs/getting-started.html). Install enzyme. Then, simply require/import React, enzyme functions, and your module at the top of a test file. ```js import React from 'react'; @@ -21,7 +21,7 @@ You do **not** need to include Jest's own renderer, unless you want to use it _o ## Jest prior to version 15 -If you are using Jest 0.9 – 14.0 with Enzyme and using Jest's automocking feature, you will need to mark react and enzyme to be unmocked in your `package.json`: +If you are using Jest 0.9 – 14.0 with enzyme and using Jest's automocking feature, you will need to mark react and enzyme to be unmocked in your `package.json`: `package.json`: ```json diff --git a/docs/guides/jsdom.md b/docs/guides/jsdom.md index d02a7fb78..7f02d15c0 100644 --- a/docs/guides/jsdom.md +++ b/docs/guides/jsdom.md @@ -1,4 +1,4 @@ -# Using Enzyme with JSDOM +# Using enzyme with JSDOM [JSDOM](https://github.com/tmpvar/jsdom) is a JavaScript based headless browser that can be used to create a realistic testing environment. diff --git a/docs/guides/karma.md b/docs/guides/karma.md index a6b5b19c7..748c2428f 100644 --- a/docs/guides/karma.md +++ b/docs/guides/karma.md @@ -1,13 +1,13 @@ -# Using Enzyme with Karma +# Using enzyme with Karma -Karma is a popular test runner that can run tests in browser environments. Enzyme is compatible with +Karma is a popular test runner that can run tests in browser environments. enzyme is compatible with Karma, but often requires a little bit of configuration. This configuration largely depends on which plugins you are using to bundle your JavaScript code. In the case of Browserify or Webpack, see the below documentation in order to get these up and running. -## Enzyme + Karma + Webpack +## enzyme + Karma + Webpack See the [webpack guide](webpack.md). @@ -34,7 +34,7 @@ module.exports = function karmaConfig(config) { }; ``` -## Enzyme + Karma + Browserify +## enzyme + Karma + Browserify See the [browserify guide](browserify.md). diff --git a/docs/guides/lab.md b/docs/guides/lab.md index 6fe23f443..70ad4ab5a 100644 --- a/docs/guides/lab.md +++ b/docs/guides/lab.md @@ -1,9 +1,9 @@ -# Using Enzyme with Lab and Code +# Using enzyme with Lab and Code [Lab](https://github.com/hapijs/lab) is a simple test utility for node & part of the [Hapi.js](https://github.com/hapijs/hapi) framework universe. Lab's initial code borrowed heavily from [Mocha](https://github.com/mochajs/mocha). [Code](https://github.com/hapijs/code) is Lab's standard assertion library and was created as a direct rewrite of [Chai](https://github.com/chaijs). -# Example Test: Enzyme + Lab + Code +# Example Test: enzyme + Lab + Code ```jsx import { shallow, mount, render } from 'enzyme'; diff --git a/docs/guides/migration-from-2-to-3.md b/docs/guides/migration-from-2-to-3.md index 278046b8f..388c93525 100644 --- a/docs/guides/migration-from-2-to-3.md +++ b/docs/guides/migration-from-2-to-3.md @@ -1,19 +1,19 @@ -# Migration Guide for Enzyme v2.x to v3.x +# Migration Guide for enzyme v2.x to v3.x -The change from Enzyme v2.x to v3.x is a more significant change than in previous major releases, -due to the fact that the internal implementation of Enzyme has been almost completely rewritten. +The change from enzyme v2.x to v3.x is a more significant change than in previous major releases, +due to the fact that the internal implementation of enzyme has been almost completely rewritten. -The goal of this rewrite was to address a lot of the major issues that have plagued Enzyme since -its initial release. It was also to simultaneously remove a lot of the dependence that Enzyme has -on react internals, and to make enzyme more "pluggable", paving the way for Enzyme to be used +The goal of this rewrite was to address a lot of the major issues that have plagued enzyme since +its initial release. It was also to simultaneously remove a lot of the dependence that enzyme has +on react internals, and to make enzyme more "pluggable", paving the way for enzyme to be used with "React-like" libraries such as Preact and Inferno. -We have done our best to make Enzyme v3 as API compatible with v2.x as possible, however there are +We have done our best to make enzyme v3 as API compatible with v2.x as possible, however there are a hand full of breaking changes that we decided we needed to make, intentionally, in order to support this new architecture and also improve the usability of the library long-term. -Airbnb has one of the largest Enzyme test suites, coming in at around 30,000 enzyme unit tests. -After upgrading Enzyme to v3.x in Airbnb's code base, 99.6% of these tests succeeded with no +Airbnb has one of the largest enzyme test suites, coming in at around 30,000 enzyme unit tests. +After upgrading enzyme to v3.x in Airbnb's code base, 99.6% of these tests succeeded with no modifications at all. Most of the tests that broke we found to be easy to fix, and some we found to actually be depending on what could arguably be considered a bug in v2.x, and the breakage was actually desired. @@ -25,16 +25,16 @@ find a breakage that doesn't seem to make sense to you, feel free to file an iss ## Configuring your Adapter -Enzyme now has an "Adapter" system. This means that you now need to install Enzyme along with -another module that provides the Adapter that tells Enzyme how to work with your version of React +enzyme now has an "Adapter" system. This means that you now need to install enzyme along with +another module that provides the Adapter that tells enzyme how to work with your version of React (or whatever other react-like library you are using). -At the time of writing this, Enzyme publishes "officially supported" adapters for React 0.13.x, +At the time of writing this, enzyme publishes "officially supported" adapters for React 0.13.x, 0.14.x, 15.x, and 16.x. These adapters are npm packages of the form `enzyme-adapter-react-{{version}}`. -You will want to configure Enzyme with the adapter you'd like to use before using enzyme in your -tests. The way to do this is whith `Enzyme.configure(...)`. For example, if your project depends -on React 16, you would want to configure Enzyme this way: +You will want to configure enzyme with the adapter you'd like to use before using enzyme in your +tests. The way to do this is whith `enzyme.configure(...)`. For example, if your project depends +on React 16, you would want to configure enzyme this way: ```js import Enzyme from 'enzyme'; @@ -45,7 +45,7 @@ Enzyme.configure({ adapter: new Adapter() }); The list of adapter npm packages for React semver ranges are as follows: -| Enzyme Adapter Package | React semver compatibility | +| enzyme Adapter Package | React semver compatibility | | --- | --- | | `enzyme-adapter-react-16` | `^16.0.0` | | `enzyme-adapter-react-15` | `^15.5.0` | @@ -56,9 +56,9 @@ The list of adapter npm packages for React semver ranges are as follows: ## Element referential identity is no longer preserved -Enzyme's new architecture means that the react "render tree" is transformed into an intermediate -representation that is common across all react versions so that Enzyme can properly traverse it -independent of React's internal representations. A side effect of this is that Enzyme no longer +enzyme's new architecture means that the react "render tree" is transformed into an intermediate +representation that is common across all react versions so that enzyme can properly traverse it +independent of React's internal representations. A side effect of this is that enzyme no longer has access to the actual object references that were returned from `render` in your React components. This normally isn't much of a problem, but can manifest as a test failure in some cases. @@ -91,17 +91,17 @@ const iconCount = wrapper.find(Icon).length; In v2.x, `iconCount` would be 1. In v3.x, it will be 2. This is because in v2.x it would find all of the elements matching the selector, and then remove any duplicates. Since `ICONS.success` is included twice in the render tree, but it's a constant that's reused, it would show up as a -duplicate in the eyes of Enzyme v2.x. In Enzyme v3, the elements that are traversed are +duplicate in the eyes of enzyme v2.x. In enzyme v3, the elements that are traversed are transformations of the underlying react elements, and are thus different references, resulting in two elements being found. Although this is a breaking change, I believe the new behavior is closer to what people would -actually expect and want. Having Enzyme wrappers be immutable results in more deterministic tests +actually expect and want. Having enzyme wrappers be immutable results in more deterministic tests that are less prone to flakiness from external factors. ## `children()` now has slightly different meaning -Enzyme has a `.children()` method which is intended to return the rendered children of a wrapper. +enzyme has a `.children()` method which is intended to return the rendered children of a wrapper. When using `mount(...)`, it can sometimes be unclear exactly what this would mean. Consider for example the following react components: @@ -135,14 +135,14 @@ Although the `` element has a `children` prop of `
...
` element. -Prior Enzyme v3, we would observe the following behavior: +Prior enzyme v3, we would observe the following behavior: ```js wrapper.find(Box).children().debug(); // =>
``` -In Enzyme v3, we now have `.children()` return the *rendered* children. In other words, it returns +In enzyme v3, we now have `.children()` return the *rendered* children. In other words, it returns the element that is returned from that component's `render` function. ```js @@ -191,18 +191,18 @@ class CurrentTime extends React.Component { ``` In this code, there is a timer that continuously changes the rendered output of this component. This -might be a reasonable thing to do in your application. The thing is, Enzyme has no way of knowing -that these changes are taking place, and no way to automatically update the render tree. In Enzyme -v2, Enzyme operated *directly* on the in-memory representation of the render tree that React itself -had. This means that even though Enzyme couldn't know when the render tree was updated, updates +might be a reasonable thing to do in your application. The thing is, enzyme has no way of knowing +that these changes are taking place, and no way to automatically update the render tree. In enzyme +v2, enzyme operated *directly* on the in-memory representation of the render tree that React itself +had. This means that even though enzyme couldn't know when the render tree was updated, updates would be reflected anyway, since React *does* know. -Enzyme v3 architecturally created a layer where React would create an intermediate representation -of the render tree at an instance in time and pass that to Enzyme to traverse and inspect. This has +enzyme v3 architecturally created a layer where React would create an intermediate representation +of the render tree at an instance in time and pass that to enzyme to traverse and inspect. This has many advantages, but one of the side effects is that now the intermediate representation does not receive automatic updates. -Enzyme does attempt to automatically "update" the root wrapper in most common scenarios, but these +enzyme does attempt to automatically "update" the root wrapper in most common scenarios, but these are only the state changes that it knows about. For all other state changes, you may need to call `wrapper.update()` yourself. @@ -236,7 +236,7 @@ class Counter extends React.Component { This is a basic "counter" component in React. Here our resulting markup is a function of `this.state.count`, which can get updated by the `increment` and `decrement` functions. Let's take a -look at what some Enzyme tests with this component might look like, and when we do or don't have to +look at what some enzyme tests with this component might look like, and when we do or don't have to call `update()`. ```js @@ -259,7 +259,7 @@ wrapper.find('.dec').simulate('click'); wrapper.find('.count').text(); // => "Count: 1" ``` -In this case Enzyme will automatically check for updates after an event simulation takes place, as +In this case enzyme will automatically check for updates after an event simulation takes place, as it knows that this is a very common place for state changes to occur. In this case there is no difference between v2 and v3. @@ -276,11 +276,11 @@ wrapper.instance().decrement(); wrapper.find('.count').text(); // => "Count: 0" (would have been "Count: 1" in v2) ``` -The problem here is that once we grab the instance using `wrapper.instance()`, Enzyme has no way of +The problem here is that once we grab the instance using `wrapper.instance()`, enzyme has no way of knowing if you are going to execute something that will cause a state transition, and thus does not know when to ask for an updated render tree from React. As a result, `.text()` never changes value. -The fix here is to use Enzyme's `wrapper.update()` method after a state change has occurred: +The fix here is to use enzyme's `wrapper.update()` method after a state change has occurred: ```js const wrapper = shallow(); @@ -297,7 +297,7 @@ wrapper.find('.count').text(); // => "Count: 1" ``` In practice we have found that this isn't actually needed that often, and when it is it is not -difficult to add. Additionally, having the Enzyme wrapper automatically update alongside the real +difficult to add. Additionally, having the enzyme wrapper automatically update alongside the real render tree can result in flaky tests when writing asynchronous tests. This breaking change was worth the architectural benefits of the new adapter system in v3, and we believe is a better choice for an assertion library to take. @@ -305,7 +305,7 @@ for an assertion library to take. ## `ref(refName)` now returns the actual ref instead of a wrapper -In Enzyme v2, the wrapper returned from `mount(...)` had a prototype method on it `ref(refName)` +In enzyme v2, the wrapper returned from `mount(...)` had a prototype method on it `ref(refName)` that returned a wrapper around the actual element of that ref. This has now been changed to return the actual ref, which we believe is a more intuitive API. @@ -326,7 +326,7 @@ share the same constructor: ```js const wrapper = mount(); -// this is what would happen with Enzyme v2 +// this is what would happen with enzyme v2 expect(wrapper.ref('abc')).toBeInstanceOf(wrapper.constructor); ``` @@ -335,7 +335,7 @@ this case, it would be a DOM Element: ```js const wrapper = mount(); -// this is what happens with Enzyme v3 +// this is what happens with enzyme v3 expect(wrapper.ref('abc')).toBeInstanceOf(Element); ``` @@ -362,7 +362,7 @@ method. ## With `mount`, `.instance()` can be called at any level of the tree -Enzyme now allows for you to grab the `instance()` of a wrapper at any level of the render tree, +enzyme now allows for you to grab the `instance()` of a wrapper at any level of the render tree, not just at the root. This means that you can `.find(...)` a specific component, then grab its instance and call `.setState(...)` or any other methods on the instance that you'd like. @@ -385,11 +385,11 @@ account for this. ## Private properties and methods have been removed -There are several properties that are on an Enzyme "wrapper" that were considered to be private and +There are several properties that are on an enzyme "wrapper" that were considered to be private and were undocumented as a result. Despite being undocumented, people may haev been relying on them. In an effort to make making changes less likely to be accidentally breaking in the future, we have decided to make these properties properly "private". The following properties will no longer be -accessible on Enzyme `shallow` or `mount` instances: +accessible on enzyme `shallow` or `mount` instances: - `.node` - `.nodes` @@ -401,25 +401,25 @@ accessible on Enzyme `shallow` or `mount` instances: ## Cheerio has been updated, thus `render(...)` has been updated as well -Enzyme's top level `render` API returns a [Cheerio](https://github.com/cheeriojs/cheerio) object. -The version of Cheerio that we use has been upgraded to 1.0.0. For debugging issues across Enzyme +enzyme's top level `render` API returns a [Cheerio](https://github.com/cheeriojs/cheerio) object. +The version of Cheerio that we use has been upgraded to 1.0.0. For debugging issues across enzyme v2.x and v3.x with the `render` API, we recommend checking out [Cheerio's Changelog](https://github.com/cheeriojs/cheerio/blob/48eae25c93702a29b8cd0d09c4a2dce2f912d1f4/History.md) and -posting an issue on that repo instead of Enzyme's unless you believe it is a bug in Enzyme's use +posting an issue on that repo instead of enzyme's unless you believe it is a bug in enzyme's use of the library. ## CSS Selector -Enzyme v3 now uses a real CSS selector parser rather than its own incomplete parser implementation. +enzyme v3 now uses a real CSS selector parser rather than its own incomplete parser implementation. This is done with [rst-selector-parser](https://github.com/aweary/rst-selector-parser) a fork of [scalpel](https://github.com/gajus/scalpel/) which is a CSS parser implemented with [nearley](https://nearley.js.org/). -We don't think this should cause any breakages across Enzyme v2.x to v3.x, but if you believe you +We don't think this should cause any breakages across enzyme v2.x to v3.x, but if you believe you have found something that did indeed break, please file an issue with us. Thank you to [Brandon Dail](https://github.com/aweary) for making this happen! ## Node Equality now ignores `undefined` values -We have updated Enzyme to consider node "equality" in a semantically identical way to how react -treats nodes. More specifically, we've updated Enzyme's algorithms to treat `undefined` props as +We have updated enzyme to consider node "equality" in a semantically identical way to how react +treats nodes. More specifically, we've updated enzyme's algorithms to treat `undefined` props as equivalent to the absence of a prop. Consider the following example: @@ -431,7 +431,7 @@ class Foo extends React.Component { } ``` -With this component, the behavior in Enzyme v2.x the behavior would have been like: +With this component, the behavior in enzyme v2.x the behavior would have been like: ```js const wrapper = shallow(); @@ -439,7 +439,7 @@ wrapper.equals(
); // => false wrapper.equals(
); // => true ``` -With Enzyme v3, the behavior is now as follows: +With enzyme v3, the behavior is now as follows: ```js const wrapper = shallow(); wrapper.equals(
); // => true @@ -448,11 +448,11 @@ wrapper.equals(
); // => true ## Lifecycle methods -Enzyme v2.x had an optional flag that could be passed in to all `shallow` calls which would make it +enzyme v2.x had an optional flag that could be passed in to all `shallow` calls which would make it so that more of the component's lifecycle methods were called (such as `componentDidMount` and `componentDidUpdate`). -With Enzyme v3, we have now turned on this mode by default, instead of making it opt-in. It is now +With enzyme v3, we have now turned on this mode by default, instead of making it opt-in. It is now possible to *opt-out* instead. Additionally, you can now opt-out at a global level. If you'd like to opt out globally, you can run the following: diff --git a/docs/guides/mocha.md b/docs/guides/mocha.md index b9f507f2d..735936112 100644 --- a/docs/guides/mocha.md +++ b/docs/guides/mocha.md @@ -1,6 +1,6 @@ -# Using Enzyme with Mocha +# Using enzyme with Mocha -Enzyme was originally designed to work with Mocha, so getting it up and running with Mocha should +enzyme was originally designed to work with Mocha, so getting it up and running with Mocha should be no problem at all. Simply install it and start using it: ```bash diff --git a/docs/guides/react-native.md b/docs/guides/react-native.md index ddbc88006..d2a927cd5 100644 --- a/docs/guides/react-native.md +++ b/docs/guides/react-native.md @@ -1,7 +1,7 @@ -# Using Enzyme to Test Components in React Native +# Using enzyme to Test Components in React Native As of v0.18, React Native uses React as a dependency rather than a forked version of the library, -which means it is now possible to use Enzyme's `shallow` with React Native components. +which means it is now possible to use enzyme's `shallow` with React Native components. Unfortunately, React Native has many environmental dependencies that can be hard to simulate without a host device. diff --git a/docs/guides/systemjs.md b/docs/guides/systemjs.md index 212941fde..e4bf45c4b 100644 --- a/docs/guides/systemjs.md +++ b/docs/guides/systemjs.md @@ -1,9 +1,9 @@ -# Using Enzyme with SystemJS +# Using enzyme with SystemJS If you are using a test runner that runs code in a browser-based environment, you may be using [SystemJS]() in order to bundle your React code. -Prior to Enzyme 3.0 there were some issues with conditional requires that were used -to maintain backwards compatibility with React versions. With Enzyme 3.0+, this +Prior to enzyme 3.0 there were some issues with conditional requires that were used +to maintain backwards compatibility with React versions. With enzyme 3.0+, this should no longer be an issue. If it is, please file a GitHub issue or make a PR to this documentation with instructions on how to set it up. diff --git a/docs/guides/tape-ava.md b/docs/guides/tape-ava.md index 698a97767..3c554555f 100644 --- a/docs/guides/tape-ava.md +++ b/docs/guides/tape-ava.md @@ -1,6 +1,6 @@ -# Using Enzyme with Tape and AVA +# Using enzyme with Tape and AVA -Enzyme works well with [Tape](https://github.com/substack/tape) and [AVA](https://github.com/avajs/ava). +enzyme works well with [Tape](https://github.com/substack/tape) and [AVA](https://github.com/avajs/ava). Simply install it and start using it: ```bash diff --git a/docs/guides/webpack.md b/docs/guides/webpack.md index 71c2df4da..4895f515b 100644 --- a/docs/guides/webpack.md +++ b/docs/guides/webpack.md @@ -1,9 +1,9 @@ -# Using Enzyme with Webpack +# Using enzyme with Webpack If you are using a test runner that runs code in a browser-based environment, you may be using [webpack](https://webpack.js.org/) in order to bundle your React code. -Prior to Enzyme 3.0 there were some issues with conditional requires that were used -to maintain backwards compatibility with React versions. With Enzyme 3.0+, this +Prior to enzyme 3.0 there were some issues with conditional requires that were used +to maintain backwards compatibility with React versions. With enzyme 3.0+, this should no longer be an issue. If it is, please file a GitHub issue or make a PR to this documentation with instructions on how to set it up. diff --git a/docs/installation/README.md b/docs/installation/README.md index c53a834b1..d2cd67de6 100644 --- a/docs/installation/README.md +++ b/docs/installation/README.md @@ -1,12 +1,12 @@ # Installation -Enzyme should be installed using npm: +enzyme should be installed using npm: ```bash npm i --save-dev enzyme ``` -Enzyme can be used with your test runner of choice. All examples in the documentation will be +enzyme can be used with your test runner of choice. All examples in the documentation will be provided using [mocha](https://mochajs.org/) and [BDD style chai](http://chaijs.com/api/bdd/), although neither library is a dependency of enzyme. diff --git a/docs/installation/react-013.md b/docs/installation/react-013.md index 27a4f37b3..c889d31ce 100644 --- a/docs/installation/react-013.md +++ b/docs/installation/react-013.md @@ -1,6 +1,6 @@ # Working with React 0.13 -If you are wanting to use Enzyme with React 0.13, but don't already have React 0.13 installed, you +If you are wanting to use enzyme with React 0.13, but don't already have React 0.13 installed, you should do so: ```bash diff --git a/docs/installation/react-16.md b/docs/installation/react-16.md index 7717f3832..1cef870f0 100644 --- a/docs/installation/react-16.md +++ b/docs/installation/react-16.md @@ -1,6 +1,6 @@ # Working with React 16 -If you are wanting to use Enzyme with React 16, but don't already have React 16 and react-dom +If you are wanting to use enzyme with React 16, but don't already have React 16 and react-dom installed, you should do so: ```bash