Goal is to be able to do a unit test to methods of a stateless function without enzyme, since I will not be testing the UI component. I tried following this, but I encounter this error:
```SyntaxError: Unexpected token <````
How can I successfully test the methods without using enzyme? Here's the simplified code.
import React, { useMemo } from 'react';
import { Badge } from 'antd';
const ItemBadge = styled(Badge)`
margin-left: 2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
`;
export const getBadgeProps = (status) => {
switch (status) {
case 'ERROR': {
return { status: 'error', color: 'red' };
}
case 'WARNING': {
return { status: 'warning', color: 'warning' };
}
case 'SUCCESS': {
return { status: 'success', color: 'green' };
}
default: {
return { status: 'default' };
}
}
return props;
};
const ItemStatus = (item) => {
const badgeProps = useMemo(() => {
return getBadgeProps(item.status);
}, [item.status]);
return <ItemBadge {...badgeProps} text="Some text..." size="small" />;
};
export default ItemStatus;
Here's my unit test targeting getBadgeProps only:
import { getBadgeProps } from '../item-status';
describe('Item Status - getBadgeProps', () => {
it('it should return correct badge props', () => {
const expectedOutput = { status: 'error' };
const badgeProps = getBadgeProps('error');
expect(badgeProps).toBe(expectedOutput);
});
});
Error I encountered:
/.../src/app/items/item-status.tsx:108
return <ItemBadge {...badgeProps} ... />;
SyntaxError: Unexpected token <
import { getBadgeProps } from '../item-status';
^
