Example project with React + Enzyme + Mocha
lelandrichardson / enzyme-example-mocha Goto Github PK
View Code? Open in Web Editor NEWExample project with React + Enzyme + Mocha
License: MIT License
Example project with React + Enzyme + Mocha
License: MIT License
Looks like this example is using the old API? FYI, learning Mocha has been so difficult because of API non-backwards compatibility in other libraries like jsdom.
This project is from a direct link from enzyme:
https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md
I use this procedure to make test for my react - webpack app. When I execute the test I got this error.
My component is like this
import React from 'react'
import {Link} from 'react-router'
import 'home.scss'
import Footer from 'Footer'
import Nav from 'Nav'
import DocumentTitle from 'react-document-title'
export default class Home extends React.Component{
render(){
return(
<div class="home">
</div>
)
}
}
and mocha .setup.js is exactly like yours
require('babel-register')();
var jsdom = require('jsdom').jsdom;
var exposedProperties = ['window', 'navigator', 'document'];
global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
if (typeof global[property] === 'undefined') {
exposedProperties.push(property);
global[property] = document.defaultView[property];
}
});
global.navigator = {
userAgent: 'node.js'
};
documentRef = document;
my home-test.js
import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
import Home from '../component/home/home';
describe("home page", function() {
it("contains spec with an expectation", function() {
expect(shallow(<Home />).contains(<div className="home" />)).to.equal(true);
});
});
In the setup.js file, what is this doing?
documentRef = document;
Hi, just curious about the setup code. Any chance enzyme would be able to abstract that away.. seems redundant.
Hi,
That error occurs when I run these tests (occurs as well when I use shallow):
it("length is = 1", function() {
expect(render(<Component />).find('.body').length).to.equal(1);
});
it("It has a footer", function() {
const wrapper = shallow(<Component />);
expect(wrapper.find('img')).to.have.length(1);
});
.setup.js file is the same and I have all of the dependencies installed.
Any tips to get this working?
Thanks.
Hi,
I have added a global object like localStorage in component render method and trying to test it with shallow rendered using enzyme. I am getting the below error, when i try to test using 'npm test'.
ReferenceError: localStorage is not defined
render() {
localStorage.setItem("name", "Smith");//can be used later
return (
If I remove localStorage from the code then all tests are good. Any idea how to get rid of it??
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.