eligrey / eligrey/FileSaver.js

Jest/Enzyme throwing an error on download a file test

Open
#518 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
22k
Forks
4.3k
PR merge metrics
No merged PRs in 30d

Description

I am using [file-saver][1] library in order to download a file.

And I am getting this error on the test:

```javascript
FAIL src/client/pages/Shipments/__tests__/components/DownloadCSVItem-test.js
DownloadCSVItem component
✓ renders DownloadCSVItem and check if classes exists (41ms)
✕ triggers DownloadCSVItem button onClick method (74ms)

● DownloadCSVItem component › triggers DownloadCSVItem button onClick method

TypeError: (0 , _fileSaver.default) is not a function

39 | });
40 |
> 41 | saveAs(blob, `${accountGuid}-summary.txt`);
| ^
42 | };
43 |
44 | return (

at saveAs (src/client/pages/Shipments/DownloadCSVItem.js:41:5)
```

And this is how the component looks:
```javascript
import React from 'react';
import PropTypes from 'prop-types';
import saveAs from 'file-saver';
import { OverflowMenuItem } from 'carbon-components-react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import { formatAddresses, momentDateFormatter } from '../../utils/formatters';

const DownloadCSVItem = ({ t, shipmentsCSV, accountGuid }) => {
const formatCSV = () => {
const shipmentsCount = shipmentsCSV.itemsCount;
const shipmentsData = shipmentsCSV.shipments;
const replacer = value => (value === null ? '— —' : value);
const CSV = {
Count: shipmentsCount,
data: shipmentsData.map(row => ({
Courier: replacer(row.courierName),
Status: replacer(row.status.name),
Type: replacer(row.type.name),
From: momentDateFormatter(row.originationDate),
})),
};

return JSON.stringify(CSV, null, 1).replace(
/"data":|[!"@#$^&%*()+=[\]{}|<>?,.\\-]/g,
'',
);
};

const downloadFile = () => {
const blob = new Blob([formatCSV()], {
type: 'text/csv;charset=UTF-8',
});

saveAs(blob, `${accountGuid}-summary.txt`);
};

return (

);
};

DownloadCSVItem.propTypes = {
t: PropTypes.func.isRequired,
accountGuid: PropTypes.string.isRequired,
shipmentsCSV: PropTypes.shape({
totalCount: PropTypes.number,
shipments: PropTypes.array,
}).isRequired,
};

export default compose(
connect(store => ({
accountGuid: store.global.accountGuid,
shipmentsCSV: store.shipments.shipmentsCSV,
})),
translate(),
)(DownloadCSVItem);
```

And here the test:
```javascript
it('triggers DownloadCSVItem button onClick method', () => {
expect.assertions(1);

const wrapper = mount();

expect(wrapper.find('button')).toHaveLength(1);
wrapper
.find('button')
.first()
.simulate('click');
});
```

What am I missing?

[1]: https://www.npmjs.com/package/file-saver/v/1.3.2

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.