0

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.

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/>));
    });
  });
});

The coinStyles.json

{
  "ada": {
    "color": "#FFF",
    "backgroundColor": "#6297DF"
  },
  "ae": {
    "color": "#F35C8E",
    "backgroundColor": "#000"
  },
  "aion": {
    "color": "#47BEEB",
    "backgroundColor": "#131944"
  },
  "algo": {
    "color": "#000",
    "backgroundColor": "#FFF"
  },
  "ant": {
    "color": "#FFF",
    "backgroundColor": "#26B9DD"
  },
  "ark": {
    "color": "#FFF",
    "backgroundColor": "#EF3A40"
  },
  "atom": {
    "color": "#FFF",
    "backgroundColor": "#161831"
  },
  "elf": {
    "color": "#FFF",
    "backgroundColor": "#2e60b7"
  },
  "bat": {
    "color": "#FFF",
    "backgroundColor": "#FC511F"
  },
  "bch": {
    "color": "#FFF",
    "backgroundColor": "#61BE42"
  },
  "bcn": {
    "color": "#FFF",
    "backgroundColor": "#EE4486"
  },
  "blt": {
    "color": "#FFF",
    "backgroundColor": "#555CEF"
  },
  "bnb": {
    "color": "#F2B940",
    "backgroundColor": "#3E3E3E"
  },
  "bnt": {
    "color": "#FFF",
    "backgroundColor": "#3B3B3B"
  },
  "brd": {
    "color": "#FFF",
    "backgroundColor": "#FA7B52"
  },
  "btc": {
    "color": "#FFF",
    "backgroundColor": "#F5922F"
  },
  "btg": {
    "color": "#FBBE2D",
    "backgroundColor": "#222423"
  },
  "bts": {
    "color": "#FFF",
    "backgroundColor": "#3EBBE9"
  },
  "cvc": {
    "color": "#FFF",
    "backgroundColor": "#359F74"
  },
  "dai": {
    "color": "#FFF",
    "backgroundColor": "#f7B04A"
  },
  "dash": {
    "color": "#FFF",
    "backgroundColor": "#1175B4"
  },
  "dcr": {
    "color": "#3AD6A3",
    "backgroundColor": "#2F76FB"
  },
  "dgb": {
    "color": "#FFF",
    "backgroundColor": "#022552"
  },
  "dgd": {
    "color": "#F0C838",
    "backgroundColor": "#212429"
  },
  "doge": {
    "color": "#333",
    "backgroundColor": "#B99E3D"
  },
  "dnt": {
    "color": "#71F7F9",
    "backgroundColor": "#273284"
  },
  "gbyte": {
    "color": "#FFF",
    "backgroundColor": "#2D3E4F"
  },
  "grin": {
    "color": "#000",
    "backgroundColor": "#FEF005"
  },
  "eos": {
    "color": "#eff4f7",
    "backgroundColor": "#443F53"
  },
  "enj": {
    "color": "#26D1CC",
    "backgroundColor": "#36245E"
  },
  "etc": {
    "color": "#FFF",
    "backgroundColor": "#678F74"
  },
  "eth": {
    "color": "#FFF",
    "backgroundColor": "#5C607F"
  },
  "fct": {
    "color": "#FFF",
    "backgroundColor": "#578299"
  },
  "fuel": {
    "color": "#FFF",
    "backgroundColor": "#093156"
  },
  "fun": {
    "color": "#9E235C",
    "backgroundColor": "#FFF"
  },
  "gas": {
    "color": "#FFF",
    "backgroundColor": "#719361"
  },
  "gno": {
    "color": "#009CBC",
    "backgroundColor": "#FFF"
  },
  "gnt": {
    "color": "#FFF",
    "backgroundColor": "#143e6d"
  },
  "lend": {
    "color": "#0DA2C2",
    "backgroundColor": "#FFF"
  },
  "icn": {
    "color": "#4D6F8B",
    "backgroundColor": "#829AAE"
  },
  "icx": {
    "color": "#FFF",
    "backgroundColor": "#3CA8B9"
  },
  "iot": {
    "color": "#FFF",
    "backgroundColor": "#333"
  },
  "lsk": {
    "color": "#FFF",
    "backgroundColor": "#1D468F"
  },
  "ltc": {
    "color": "#FFF",
    "backgroundColor": "#CDCDCD"
  },
  "lun": {
    "color": "#F04725",
    "backgroundColor": "#191B22"
  },
  "kmd": {
    "color": "#FFF",
    "backgroundColor": "#3C6363"
  },
  "maid": {
    "color": "#FFF",
    "backgroundColor": "#5C91C9"
  },
  "mana": {
    "color": "#F57028",
    "backgroundColor": "#D1C7BE"
  },
  "mco": {
    "color": "#FFF",
    "backgroundColor": "#111A32"
  },
  "mkr": {
    "color": "#F0F2F3",
    "backgroundColor": "#2ABB9C"
  },
  "mona": {
    "color": "#FFF",
    "backgroundColor": "#B6A170"
  },
  "nano": {
    "color": "#4E92DF",
    "backgroundColor": "#FFF",
    "lightBg": true
  },
  "nem": {
    "color": "#212033",
    "backgroundColor": "#2DB5AB"
  },
  "neo": {
    "color": "#FFF",
    "backgroundColor": "#4EB704"
  },
  "nmr": {
    "color": "#FFF",
    "backgroundColor": "#000"
  },
  "omg": {
    "color": "#FFF",
    "backgroundColor": "#2159EC"
  },
  "ont": {
    "color": "#FFF",
    "backgroundColor": "#39A4BC"
  },
  "pay": {
    "color": "#FFF",
    "backgroundColor": "#353437"
  },
  "pivx": {
    "color": "#FFF",
    "backgroundColor": "#7C68A4"
  },
  "poe": {
    "color": "#FFF",
    "backgroundColor": "#292929"
  },
  "poly": {
    "color": "#FFF",
    "backgroundColor": "#4C5995"
  },
  "powr": {
    "color": "#FFF",
    "backgroundColor": "#1FBBA9"
  },
  "qash": {
    "color": "#FFF",
    "backgroundColor": "#1F4BB4"
  },
  "qtum": {
    "color": "#359bce",
    "backgroundColor": "#FFF",
    "lightBg": true
  },
  "rep": {
    "color": "#FFF",
    "backgroundColor": "#412766"
  },
  "salt": {
    "color": "#22272f",
    "backgroundColor": "#FFF",
    "lightBg": true
  },
  "sia": {
    "color": "#34EC86",
    "backgroundColor": "#7F8C8D"
  },
  "spank": {
    "color": "#FFF",
    "backgroundColor": "#FF6195"
  },
  "snm": {
    "color": "#FFF",
    "backgroundColor": "#131822"
  },
  "snt": {
    "color": "#0BD09F",
    "backgroundColor": "#FFF"
  },
  "steem": {
    "color": "#0BD09F",
    "backgroundColor": "#FFF",
    "lightBg": true
  },
  "strat": {
    "color": "#FFF",
    "backgroundColor": "#1f88c7"
  },
  "storj": {
    "color": "#FFF",
    "backgroundColor": "#2E86FB"
  },
  "theta": {
    "color": "#20D7C2",
    "backgroundColor": "#1A1D25"
  },
  "trx": {
    "color": "#FFF",
    "backgroundColor": "#222423"
  },
  "tusd": {
    "color": "#62C6FF",
    "backgroundColor": "#1D294F"
  },
  "usdt": {
    "color": "#FFF",
    "backgroundColor": "#2EA07C"
  },
  "usd": {
    "color": "#FFF",
    "backgroundColor": "#CACCB7"
  },
  "usdc": {
    "color": "#FFF",
    "backgroundColor": "#2775C9"
  },
  "waves": {
    "color": "#000",
    "backgroundColor": "#105CFB"
  },
  "wtc": {
    "color": "#8125FB",
    "backgroundColor": "#59EFDC"
  },
  "vet": {
    "color": "#AA77CE",
    "backgroundColor": "#B4E8FF",
    "lightBg": true
  },
  "xmr": {
    "color": "#4C4C4C",
    "backgroundColor": "#FC6621"
  },
  "xlm": {
    "color": "#07A2CC",
    "backgroundColor": "#CEEBF6",
    "lightBg": true
  },
  "xrp": {
    "color": "#FFF",
    "backgroundColor": "#112B3F"
  },
  "xtz": {
    "color": "#FFF",
    "backgroundColor": "#2e7df8"
  },
  "xvg": {
    "color": "#FFF",
    "backgroundColor": "#3BA3CA"
  },
  "zec": {
    "color": "#000",
    "backgroundColor": "#EBB451"
  },
  "zen": {
    "color": "#5EFFB5",
    "backgroundColor": "#311c51"
  },
  "zil": {
    "color": "#50C0BE",
    "backgroundColor": "#46494B"
  },
  "zrx": {
    "color": "#FFF",
    "backgroundColor": "#383838"
  }
}
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
  • There is a minor error in your `coinStyles.json` file. if you show the part in the file that causes error, we can offer more help. – Pavindu Sep 01 '19 at 01:40
  • 1
    Issue is probably with your jest config in your `package.json`. See if this resolves for you: https://github.com/facebook/jest/issues/8426#issuecomment-507412672 – Rikin Sep 01 '19 at 01:55
  • @Pavindu added the coinStyles.json to my question, it's the first key `ada` – Leon Gaban Sep 01 '19 at 02:13
  • 2
    @Rikin that was it!!! I needed to add `"^.+\\.js?$": "babel-jest",` into the `transform` key of my `jest` key in `package.json` want to post your answer? :D – Leon Gaban Sep 01 '19 at 02:17
  • 1
    @LeonGaban glad it worked out with simple solution – Rikin Sep 01 '19 at 02:21

2 Answers2

1

Please checkout the following question/solution:

cannot-read-json-in-react-js-unexpected-token-error

ty.

olir
  • 66
  • 5
1

Issue is probably with your jest config in your package.json.

.json extension if not configured properly in your jest transform, jest dont know how to parse it and thus it incorrectly assumes probably as .js file and tries to import it that way in which case it gets parser error like yours.

See if this resolves for you: https://github.com/facebook/jest/issues/8426#issuecomment-507412672

Rikin
  • 5,351
  • 2
  • 15
  • 22