代码之家 › 专栏 › 技术社区 › Leon Gaban

测试组件快照,获取JSON错误

enzyme jestjs testing reactjs javascript

Leon Gaban · 技术社区 · 5 年前

从一个快照测试开始,因为我想覆盖我的反应式组件的测试。

写了一个基本的快照测试,测试应该通过并生成快照

结果

由于某种原因,由于检查我的 coinStyles.json 文件:

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

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

不知道为什么 coinStyles.json 正在被击中,它在我的 utils/modifiers 未被 about.tsx 文件。

关于组件

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

关于测试

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

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"
  }
}

2 回复 | 直到 5 年前

Rikin 5 年前

问题可能出在你的 package.json .

.json 如果在您的笑话中没有正确配置扩展 transform ,Jest不知道如何解析它,因此它错误地假定 .js 文件并尝试以这种方式导入它,在这种情况下,它会像您的一样得到解析器错误。

看看这是否能解决您的问题: https://github.com/facebook/jest/issues/8426#issuecomment-507412672

olir 5 年前

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

TY。