reactjs


Snapshot testing ChartJS components with Jest


I am writing some jest snapshot tests for my react component that uses ChartJS v2. My test for a Customer component looks like this
import React from 'react';
import renderer from 'react-test-renderer';
import CustomerComponent from '../src/components/customer/Customer';
describe('Customer', () => {
it('renders customer', () => {
const tree = renderer.create(
<Customer customerId={291}/>
).toJSON();
expect(tree).toMatchSnapshot();
});
});
When I run it with jest, I get this
FAIL tests/Customer.test.js
‚óŹ Test suite failed to run
ReferenceError: window is not defined
at node_modules/chart.js/src/core/core.helpers.js:672:10
at Object.<anonymous>.module.exports (node_modules/chart.js/src/core/core.helpers.js:680:3)
at Object.<anonymous> (node_modules/chart.js/src/chart.js:6:31)
at Object.<anonymous> (node_modules/react-chartjs-2/lib/index.js:20:14)
It seems ChartJS expects a window object to be defined which is not available since this is not running in a browser. Is there a way to get snapshot tests to work with ChartJS?
Just mock out the chart component from chartsjs
jest.mock('react-chartjs2', () => 'Chart')
This will replace the original component with a dump one that will just render as <Chart prop="prop"> in your snapshot.

Related Links

react-addons-update - How to insert an object deep within array of objects?
How to pass the navigator object to the components used in the react natives root file?
Redux global solution for Cannot read property of undefined in mapStateToProps if store is not yet hydrated
react native how to check if Component current show in screen
How can i create a separate chunk for each component?
How do I upgrade React from 0.13 to 15.0.1?
Why can't I set React component state in a life Cycle method
Not able to set state in componentWillReceiveProps in React
How to update the table content of using React bootstrap table?
html tags does not work inside jsx made tags
How to use gulp with browserify for React project
Material-ui React components not working
React Router no input file specified
Why React event handler is not called on dispatchEvent?
InputText bottom border disappears automatically all of sudden
What is the recommended threshold for duplication in redux/react apps in code climate?

Categories

HOME
ssms
leaflet
virtual-machine
display
jquery-plugins
mailchimp
symfony-3.2
install
cdn
soap-client
ndepend
hdf5
derby
exchange-transport-agents
nsoperation
hapijs
audio-streaming
legend-properties
single-page-application
jq
android-wifi
mattermost
fastboot
screen-scraping
pushbullet
android-wear-2.0
rancher
traveling-salesman
symlink
orgchart
marionette
csproj
vtd-xml
arp
multilanguage
wordpress-rest-api
scene7
ilog
mootools
azure-vm-scale-set
android-databinding
lighting
realloc
observer-pattern
pyexcel
pexpect
monaca
dna-sequence
fluent-nhibernate-mapping
bioperl
kendo-scheduler
programming-pearls
dynatable
robotc
qudpsocket
blackberry-webworks
class-design
disconnect
rowname
netlink
avaudiorecorder
pebble-js
chomsky-normal-form
music-player
fadein
transbase
redquerybuilder
biginsights
self-join
xml-simple
opennebula
parseexception
perfect-scrollbar
nexusdb
google-experiments
crtdbg.h
alpha-beta-pruning
method-overloading
kss
nsnotificationcenter
time-frequency
telerik-appbuilder
power-management
infor-eam
.net-reflector
xcode5.1
mobile-robots
dylan
forward-declaration
pyxplot
google-checkout
bho
pageload
rfc822
idoc
openafs
doxia
waveout
towerjs
apache-commons-email
overlays
jquery-click-event
onunload
lgpl
chars
jquery-attributes
linq-to-mysql
for-xml
versions
dojox.gfx

Resources

Encrypt Message