Create Unit Test for Methods of Function/Stateless Component

Viewed 65

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:

enter image description here

/.../src/app/items/item-status.tsx:108
        return <ItemBadge {...badgeProps} ... />;

SyntaxError: Unexpected token <

import { getBadgeProps } from '../item-status';
^
0 Answers
Related