String concatenation returning undefined on Jest test snapshot

I have the following react component

import styles from './Alert.module.scss';

const Alert = ({
  role = 'document',
  type = 'info',
}) => (
<GridItem>
  <div className={`${styles.alert} ${styles[`alert-${type}`]}`} role={role}>
   {icon && <div className={`${styles['alert-icon']}`} />}
   <div className={styles.content}>{children}</div>
  </div>
</GridItem>

and I am writing my tests like this

jest.mock('./Alert.module.scss', () => ({ 
  'alert': 'alert', 
  'type': 'info',
}));

jest.mock('./GridItem', () => 'GridItem');

describe('Alert', () => {
  it('should render correctly', () => {
    expect(renderer.create(<Alert>Alert</Alert>)).toMatchSnapshot();
  });
});

Problem is when it is creating the snapshot, the type variable is returning undefined. I assume it has something to do with the string concatenation, because the “role” variable is writing correctly.

here is the snapshot.

<GridItem>
  <div
    className="alert undefined"
    role="document"
  >
    <div>
      Alert
    </div>
  </div>
</GridItem>
`;

So, I am not sure what I am missing here or if there’s any kinda of limitation regarding to the string concat. How can I get it correctly ? Thanks!

Answer

You’re prefixing the type variable with alert-, and it seems not to be present on the mocked styles object. So you can try adding it

jest.mock('./Alert.module.scss', () => ({ 
  'alert': 'alert', 
  'type': 'info',

  // add the following line
  'alert-info': 'info'
}));

Advertisement

Answer