From b943ac77ec071a128ffc09e652232ef6c663b4c2 Mon Sep 17 00:00:00 2001 From: David Adams Date: Thu, 19 Jul 2018 20:56:56 -0500 Subject: [PATCH 1/2] docs: added Using Without Jest section --- README.md | 39 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8df11839..3d479489 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ when a real user uses it. 1. A test runner or framework 2. Specific to a testing framework (though we recommend Jest as our - preference, the library works with any framework) + preference, the library works with any framework. See [Using Without Jest](#using-without-jest)) ## Table of Contents @@ -92,6 +92,7 @@ when a real user uses it. - [Debugging](#debugging) - [`prettyDOM`](#prettydom) - [Implementations](#implementations) +- [Using Without Jest](#using-without-jest) - [FAQ](#faq) - [Other Solutions](#other-solutions) - [Guiding Principles](#guiding-principles) @@ -730,6 +731,42 @@ Implementations include: - [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) - [`pptr-testing-library`](https://github.com/patrickhulce/pptr-testing-library) +## Using Without Jest + +Jest ships with jsdom, a pure javascript implementation of the dom/html. If +you're not using Jest, you must install and configure this yourself. + +First, install jsdom. + +``` +npm install --save-dev jsdom +``` + +Then, install `babel-polyfill` if it's not already. + +``` +npm install --save-dev babel-polyfill +``` + +Next, setup your testing environment with a test helper file that gets included +during your test run. + +```javascript +// test/test-helper.js +import jsdom from 'jsdom' +const dom = new jsdom.JSDOM('') + +global.window = dom.window +global.document = dom.window.document +global.navigator = dom.window.navigator +``` + +With mocha, the test command would look something like this: + +``` +mocha --require babel-core/register --require babel-polyfill --require ./test/test-helper.js +``` + ## FAQ
From 2a53db7df4ff824806eb8b5cdc782982938d5494 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Fri, 20 Jul 2018 07:32:05 -0600 Subject: [PATCH 2/2] use jsdom-global I discovered a package that can simplify this process greatly :) --- README.md | 41 ++++++++++++++++++----------------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 3d479489..3c0f7844 100644 --- a/README.md +++ b/README.md @@ -733,40 +733,35 @@ Implementations include: ## Using Without Jest -Jest ships with jsdom, a pure javascript implementation of the dom/html. If -you're not using Jest, you must install and configure this yourself. +If you're running your tests in the browser bundled with webpack (or similar) +then `dom-testing-library` should work out of the box for you. However, most +people using `dom-testing-library` are using it with +[the Jest testing framework](https://jestjs.io/) with the `testEnvironment` +set to [`jest-environment-jsdom`](https://www.npmjs.com/package/jest-environment-jsdom) +(which is the default configuration with Jest). -First, install jsdom. +[jsdom](https://github.com/jsdom/jsdom) is a pure JavaScript implementation +of the DOM and browser APIs that runs in node. If you're not using Jest and +you would like to run your tests in Node, then you must install jsdom yourself. +There's also a package called +[jsdom-global](https://github.com/rstacruz/jsdom-global) which can be used +to setup the global environment to simulate the browser APIs. -``` -npm install --save-dev jsdom -``` - -Then, install `babel-polyfill` if it's not already. +First, install jsdom and jsdom-global. ``` -npm install --save-dev babel-polyfill -``` - -Next, setup your testing environment with a test helper file that gets included -during your test run. - -```javascript -// test/test-helper.js -import jsdom from 'jsdom' -const dom = new jsdom.JSDOM('') - -global.window = dom.window -global.document = dom.window.document -global.navigator = dom.window.navigator +npm install --save-dev jsdom jsdom-global ``` With mocha, the test command would look something like this: ``` -mocha --require babel-core/register --require babel-polyfill --require ./test/test-helper.js +mocha --require jsdom-global/register ``` +> Note, depending on the version of Node you're running, you may also need to install +> `@babel/polyfill` (if you're using babel 7) or `babel-polyfill` (for babel 6). + ## FAQ