reactjs


“Define is not defined” in Jest when testing es6 module with RequireJS dependency


I have a Jest test suite that fails to run because the component it's trying to test depends on a RequireJS module. Here's the error I'm seeing:
FAIL __tests__/components/MyComponent.test.js
● Test suite failed to run
ReferenceError: define is not defined
at Object.<anonymous> (node_modules/private-npm-module/utils.js:1:90)
The component has the following import:
import utils from 'private-npm-module';
And the private-npm-module is set up like so:
define('utils', [], function() {
return {};
});
When MyComponent is transpiled with babel and run in the browser, the dependency operates correctly. This issue only affects the unit test. How can I get my test suite to run on a component with a RequireJS dependency?
I'm using babel-jest as my scriptPreprocessor in package.json's jest config. I'm using jest v0.15.1.
So, RequireJS is not supported by Jest. In my particular case, it was easiest and most appropriate to mock my dependency at the top of MyComponent.test.js:
jest.mock('private-npm-module', () => {
// mock implementation
})
import MyComponent from '../../components/MyComponent';
This way, when MyComponent is loaded, its dependency is already mocked, so it won't try to load the RequireJS module.
If you really do need to load your RequireJS module for your test, it may be possible to use jest's transform configuration to wrap your implementation in a RequireJS to ES6 converter.

Related Links

React Native Previous scene is below the current scene
React Lifting Sate Up Through Components
auth0 - invalid user_metadata type
How to add custom markers to mapbox-gl js?
Redux state not updating right away?
Wrapping a TextField in my own reusable component
React: Within a container how to render a component on to another one without rerender others?
How to filter items from firebase with react-redux-firebase
Focus kickout on custom redux form input
componentWillReceiveProps not update state in function
React HOC won't trigger on route change
React stateless component with controlled form Elements?
Prevent an user from accessing other routes - ReactJS - React-Router -
Why does React warn “Unknown prop `p` on <p> tag. Remove this prop from the element.” when there's no such prop?
React js setstate not working on much browsers
nginx reactjs custom 500 error gets sent back but doesn't render on the screen

Categories

HOME
repository
swift3
macros
teradata
assign
ms-application-insights
xss
flowtype
install
theory
ldap-query
adroitlogic
guidewire
hdf5
box2d
ringcentral
passbook
gnu-screen
mattermost
onclicklistener
textview
unity3d-5
minitest
oracle-bpm-suite
gem-fury
blueimp
observer-pattern
aura-framework
datagridviewcombobox
firefox-developer-edition
superclass
bootstrap-carousel
html-entities
amazon-fire-tv
logan-square
chrome-custom-tabs
ocpjp
rivets.js
cloudconvert
ear
nservicebus6
codesniffer
scanf
vertex-shader
sqlproj
lattice
ldd
gdi
cascading
traminer
uinavigationitem
firewire
parseexception
asp.net-2.0
azure-worker-roles
scjp
banana-pi
acrofields
db2-connect
lastinsertid
expresso-store
jquery-1.8
mysql-connector
facebook-winjs-sdk
commonsware
fileoutputstream
code-organization
discussion-board
log-shipping
isgl3d
gmagick
windows-xp-embedded
sessiontracking
designated-initializer
n2
mysql-logic
for-xml
appointment
data-formats
qlibrary
paperless

Resources

Encrypt Message