Comments (9)
Polluting the global document causes side effects among tests, they basically share the DOM thus causing nasty behaviors when running multiple tests with Mocha for example. So that workaround fixes one problem but causes others
from enzyme.
Hey all - just for reference, requiring jsdom
prior to requiring enzyme
fixed this issue for me as well. Thanks to all for the assistance here.
from enzyme.
Hmm. Surprised this is happening. I will look into it as soon as I get a sec.
from enzyme.
@silvenon I'm looking into this but it looks like React 0.14 has a hard dependency on document.createElement
at require-time in order to get this to work properly, where-as React 0.13 did not. There may be a way around this, but I'm not sure what it is yet.
In the mean time, you should be able to get this working by requiring jsdom
and leak it to the global object before requiring enzyme (which is what jest is doing, FWIW).
global.document = require('jsdom').jsdom('');
var { mount } = require('enzyme');
// use `mount` here like normal, but don't use `describeWithDOM`...
note that the usage of require
over import
here is intentional, since the first statement must be executed before enzyme (and thus react) get's required.
I'm working on a less brittle way to fix this...
from enzyme.
I managed to keep my precious import
s by adding this helper:
// test/global.js
import jsdom from 'jsdom';
global.document = jsdom.jsdom('');
global.window = document.defaultView;
global.navigator = window.navigator;
And passing --require ./test/global
to Mocha, which ensured that it will be loaded first.
I also had to define window
and navigator
. navigator
because react-dom was calling navigator.userAgent.indexOf()
, which was throwing.
Thanks, it works now π
from enzyme.
I realized that my solution only initializes the document once, is this bad?
from enzyme.
@silvenon it depends. Doing so can simplify a lot of things. some libraries will cache a reference to the document at require time (like jquery) and thus you have to jump through a lot of hoops to have code work when using a new document for every test. We plan on using only a single document for our entire test suite at airbnb soon, but we don't yet.
As far as react goes, enzyme's mount()
uses TestUtils.renderIntoDocument
internally which doesn't even attach itself to the main document, so it has pretty limited side effects that could affect other tests, but you still need to be conscious about some DOM APIs that will have side effects across tests.
Also, you should be able to refresh the document later on in your tests and react will work just fine with it. React doesn't cache any document references AFAICT, it just uses whatever document is off the global.
from enzyme.
Thanks for the detailed explanation π Learning so much from you guys.
from enzyme.
Closing this issue as it should now be "fixed". This problem should no longer exist so long as you have a global document
object prior to requiring react for the first time.
from enzyme.
Related Issues (20)
- enzyme-adapter-react-18 HOT 2
- Component is not re-rendered with updated states HOT 5
- Cheerio 1.0.0-rc.11 no longer support deep imports HOT 3
- enzyme crash since Cheerio 1.0.0-rc.11 release HOT 5
- CSS selectors match component props rather than rendered DOM HOT 6
- Cannot read property 'child' of undefined on React 16 + enzyme-adapter-react-16 HOT 1
- Cannot read property 'child' of undefined enzyme-adapter-react-16 and react 17.0.2 HOT 3
- "TypeError: Cannot read properties of undefined (reading 'current')" in mount API HOT 7
- Method βpropsβ is only meant to be run on a single node. 0 found instead. HOT 1
- How to test the form which is rendered based on props in class component in react.js ? HOT 3
- How to test the state values which are setting the state from local storage inside componentDidMount in enzyme using reactjs ? HOT 5
- Function `mount` does not mock proper data HOT 5
- [email protected] does not include latest changes as per master HOT 5
- Document `getElement(s)` for full DOM rendering HOT 3
- TypeError: window.require is not a function HOT 5
- Does Enzyme support React 18.0.2 ? HOT 1
- Is this library 'dead'? HOT 5
- Explain how the synchronization works HOT 1
- Mount and simulate are failing after changing to Node 16 HOT 10
- enzyme-adapter-react-18 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from enzyme.