Last active
June 11, 2018 06:03
-
-
Save atomicpages/20b073a4a6d3a5a74325d0f3e170c566 to your computer and use it in GitHub Desktop.
React + Jest + Enzyme with non-webpack app
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"plugins": [ | |
"transform-class-properties", | |
"transform-react-jsx" | |
], | |
"presets": [ | |
"stage-2", | |
["env", { | |
"targets": { | |
"browsers": [ | |
"last 2 versions", | |
"not last 2 ie versions", | |
"last 1 ie versions" | |
] | |
} | |
}] | |
] | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Enzyme = require("enzyme"); | |
const EnzymeAdapter = require("enzyme-adapter-react-16"); | |
// Setup enzyme's react adapter | |
Enzyme.configure({ adapter: new EnzymeAdapter() }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "jest", | |
"version": "1.0.0", | |
"main": "index.js", | |
"license": "MIT", | |
"dependencies": { | |
"react": "^16.4.0", | |
"react-dom": "^16.4.0" | |
}, | |
"devDependencies": { | |
"babel": "^6.23.0", | |
"babel-plugin-transform-react-jsx": "^6.24.1", | |
"babel-preset-env": "^1.7.0", | |
"babel-preset-stage-2": "^6.24.1", | |
"enzyme": "^3.3.0", | |
"enzyme-adapter-react-16": "^1.1.1", | |
"jest": "^23.1.0" | |
}, | |
"jest": { | |
"verbose": true, | |
"collectCoverage": true, | |
"setupTestFrameworkScriptFile": "<rootDir>/.setup.js", | |
"moduleDirectories": [ | |
"node_modules" | |
], | |
"coverageReporters": [ | |
"text", | |
"html", | |
"lcov" | |
] | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function (factory) { | |
if (typeof module === 'object' && module.exports) { | |
module.exports = function (root, jQuery) { | |
if (jQuery === undefined) { | |
if ( typeof window !== 'undefined' ) { | |
jQuery = require('jquery'); | |
} else { | |
jQuery = require('jquery')(root); | |
} | |
} | |
factory(jQuery); | |
return jQuery; | |
}; | |
} else { | |
factory(jQuery); | |
} | |
}(function ($) { | |
window.app = { Sample: {} }; | |
window.app.Sample = class Demo extends React.Component { | |
state = { count: 0 }; | |
constructor(props) { | |
super(props); | |
} | |
incrementCounter() { | |
this.setState({ count: this.state.count + 1 }); | |
} | |
render() { | |
return ( | |
<div> | |
<a onClick={this.incrementCounter.bind(this)}>Click </a> | |
<span>{this.state.count}</span> | |
</div> | |
); | |
} | |
}; | |
})); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const React = require('react'); | |
const { shallow } = require('enzyme'); | |
const Sample = require('./Sample'); | |
beforeAll(function () { | |
window.React = React; | |
}); | |
describe('Demo test', function () { | |
it('Module is properly exported and can be consumed by Jest', function () { | |
expect(Sample).toBeDefined(); | |
}); | |
it('Should render', function () { | |
const sample = shallow(<Sample />); | |
expect(sample.find('span')).toHaveLength(1); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment