Testing component snapshot, getting json error

Started on a snapshot test because I want to cover testing my react styled-components.

Expected

Wrote a basic snapshot test, test should pass and generate snapshot

Results

For some reason test is failing due to checking my coinStyles.json file:

SyntaxError: /Users/leongaban/projects/Futuratum/moon.holdings/coinStyles.json: Unexpected token, expected ";" (2:7)

      1 | {
    > 2 |   "ada": {
        |        ^
      3 |     "color": "#FFF",
      4 |     "backgroundColor": "#6297DF"
      5 |   },

Not sure why coinStyles.json is being hit, it's used in my utils/modifiers file which isn't touched by the about.tsx file.

Branch in question:

https://gitlab.com/futuratum/moon.holdings/tree/tests-completion

Merge Request:

https://gitlab.com/futuratum/moon.holdings/merge_requests/6

The About component

import React from 'react'

import { Astronaut, NomicsLink } from '../components'
import { AboutContainer, TeamImages, TeamImg, TeamDiv, TeamSocial } from '../styles'
import { MOON_HOLDINGS } from '../shared/constants/copy'

class About extends React.Component {
  render() {
    return (
      <div id="about-container">
        <AboutContainer>
          <h1>The Futuratum Team</h1>
          <p><a href="https://futuratum.io">Futuratum</a> is about building, playing and exploring possibilities within the nascent cryptocurrency space.</p>
          <p>Questions we ask ourselves everyday: What is worth building? What are the possible emerging trends? What fintech solutions could help people best? How could we gamify finance and building wealth?</p>
          <TeamImages>
            <TeamDiv>
              <TeamImg src="static/team/leon.png" alt="Leon Gaban"/>
              <h4>Leon Gaban</h4>
              <h5>Founder</h5>
              <TeamSocial>
                <a href="https://twitter.com/leongaban" target="_blank" title="Leon on Twitter">
                  <img src="static/twitter.png" alt="Leon's Twitter"/>
                </a>
                <a href="https://github.com/leongaban" target="_blank" title="Leon's Github">
                  <img src="static/github.png" alt="Leon's Github"/>
                </a>
              </TeamSocial>
              <p>Leon Is a UI developer who comes from a design background, a self-taught coder with a passion for educating people about cryptocurrencies.</p>
            </TeamDiv>
            <TeamDiv>
              <TeamImg src="static/team/paulo.png" alt="Paulo Darocha"/>
              <h4>Paulo Darocha</h4>
              <h5>CTO</h5>
              <TeamSocial>
                <a href="https://github.com/prochafilho" target="_blank" title="Paulo's Github">
                  <img src="static/github.png" alt="Paulo's Github"/>
                </a>
              </TeamSocial>
              <p>Paulo is a self-taught full-stack programmer, with a passion for coding, math, teaching code and constant learning.</p>
            </TeamDiv>
          </TeamImages>
          <p>Our first product is <span>{MOON_HOLDINGS}</span>, a web UI based cryptocurrency portfolio tracker. And we have a roadmap to introduce user accounts and adding gamified ranking elements to growing your crypto wealth.</p>
        </AboutContainer>
        <NomicsLink displayAboutLink={false} />
        <Astronaut className="astronaut" showLogo={true}/>
      </div>
    )
  }
}

export default About

The About test

import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'

// @ts-ignore (works with .tsx)
import About from '../about.tsx'

describe('<About /> component', () => {
  describe('rendering', () => {
    const wrapper = shallow(<About />);
    it('should render a component matching the snapshot', () => {
      const tree = toJson(wrapper);
      expect(tree).toMatchSnapshot();
      expect(wrapper).toHaveLength(1);
      expect(wrapper.contains(<About/>));
    });
  });
});