TypeError: symbol is not a function

Question

FooterView.tsx

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

import logo from 'assets/images/logo_header.svg';
import { ReactSVG } from 'react-svg';
import iconTwitter from 'assets/images/logo_twitter.svg';
import iconFacebook from 'assets/images/logo_facebook.svg';
import iconYoutube from 'assets/images/logo_youtube.svg';
import { proxyConfSelector } from 'core';
import { useSelector } from 'react-redux';
import { useTranslation } from 'hooks/useTranslation';

const Footer = () => {
  const proxyConf = useSelector(proxyConfSelector);
  const year = new Date().getFullYear();
  const [t, lang] = useTranslation();

  // eslint-disable-next-line no-console
  console.log('Language', [t, lang]);

  return (
    <div className={styles.footerContainer}>
      <a href={`https://fodjan.com/${lang === 'de' ? 'de/' : 'en/'}`}>
        <ReactSVG className={styles.footerLogo} src={logo} />
      </a>
      <div className={styles.love}>
        Made with <span className={styles.heart}>♥</span> in Germany
      </div>
      <div className={styles.socialMediaContainer}>
        <div className={styles.socialList}>
          <a
            href="https://twitter.com/fodjan?lang=de"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src={iconTwitter} alt="twitter icon" />
          </a>
          <a
            href="https://www.facebook.com/fodjan.de/"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src={iconFacebook} alt="facebook icon" />
          </a>
          <a
            href="https://www.youtube.com/channel/UCKwdzpWq1uy0sblX3_VIKHg"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src={iconYoutube} alt="youtube icon" />
          </a>
        </div>
      </div>
      <div className={styles.links}>
        <a
          href={proxyConf ? proxyConf.fe1Url + '/infos/terms' : ''}
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('AGB')}
        </a>
        <a
          href={proxyConf ? proxyConf.fe1Url + '/infos/policy' : ''}
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('Datenschutz')}
        </a>
        <a
          href={proxyConf ? proxyConf.fe1Url + '/infos/imprint' : ''}
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('Impressum')}
        </a>
      </div>
      <div className={styles.copyright}>
        © {year} fodjan GmbH. {t('Alle Rechte vorbehalten.')}
      </div>
    </div>
  );
};

export default Footer;

FooterView.test.tsx

import FooterView from '../FooterView';
import { render } from '@testing-library/react';
import * as redux from 'react-redux';

const config = {
  fe1Url: 'www.fodjan.com',
  feVersion: '1.0',
};

const spyOnUseSelector = () => {
  jest.spyOn(redux, 'useSelector').mockImplementation(selector => {
    switch (selector.name) {
      case 'proxyConfSelector':
        return config;
      default:
        return jest.fn();
    }
  });
  jest.mock('hooks/useTranslation', () => ({
    useTranslation: jest.fn().mockImplementation(() => [jest.fn(), 'en']),
  }));
};

test('check if rendered correctly', () => {
  spyOnUseSelector();
  const renderCheck = render(<FooterView />);
  expect(renderCheck.container.firstChild).toMatchSnapshot();
});

Error

 TypeError: symbol is not a function

      24 | test('check if rendered correctly', () => {
      25 |   spyOnUseSelector();
    > 26 |   const renderCheck = render(<FooterView />);
         |                       ^
      27 |   expect(renderCheck.container.firstChild).toMatchSnapshot();
      28 | });
      29 | 

I could not figure out why test is failing and I'm getting TypeError: symbol is not a function. It seems to me there is something not being mocked but I don't know.

Walterwalters

Answer 1

Media files aren't being mocked.

Create an image mock file with the content:

module.exports = 'test-file-stub';

Then add a jest config file in the root folder:

/jest.config.js

with content (if you already have one just add moduleNameMapper object):

module.exports = {
  moduleNameMapper: {
    '\\.(png|jpg|webp|ttf|woff|woff2|svg|mp4)$': '<rootDir>/path-to-fileMock.js'
  }
}

That should fix it.

More about here: https://jestjs.io/docs/webpack

Aara