Javascript 测试组件快照，获取json错误
从快照测试开始，因为我想介绍如何测试react样式的组件 预期 写了一个基本的快照测试，测试应该通过并生成快照 结果 由于某些原因，由于检查我的文件，测试失败： 不确定为什么会命中Javascript 测试组件快照，获取json错误,javascript,reactjs,testing,jestjs,enzyme,Javascript,Reactjs,Testing,Jestjs,Enzyme,从快照测试开始，因为我想介绍如何测试react样式的组件 预期 写了一个基本的快照测试，测试应该通过并生成快照 结果 由于某些原因，由于检查我的文件，测试失败： 不确定为什么会命中coinStyles.json，它被用在我的文件中，而about.tsx文件没有触及它 关于组件 请检查以下问题/解决方案： ty.请检查以下问题/解决方案： ty.问题可能与包.json中的jest配置有关 .json扩展名如果在jest转换中没有正确配置，jest不知道如何解析它，因此它错误地假设可能是.js文
coinStyles.jsonabout.tsx请检查以下问题/解决方案：
ty.请检查以下问题/解决方案：
ty.问题可能与
包.json中的jest配置有关
.json
扩展名如果在jest转换中没有正确配置，jest不知道如何解析它，因此它错误地假设可能是.js
文件，并尝试以这种方式导入它，在这种情况下，它会得到与您一样的解析器错误
看看这是否能为您解决：问题可能与包.json中的jest配置有关
.json
扩展名如果在jest转换中没有正确配置，jest不知道如何解析它，因此它错误地假设可能是.js
文件，并尝试以这种方式导入它，在这种情况下，它会得到与您一样的解析器错误
看看这是否能为您解决：您的coinStyles.json
文件中有一个小错误。如果您在文件中显示导致错误的部分，我们可以提供更多帮助。问题可能是您的package.json
中的jest配置。看看这是否能为你解决：@Pavindu在我的问题中添加了coinStyles.json，这是第一个键ada
@Rikin就是它！！！我需要将“^.+\.js？$”：“babel jest”
添加到我的jest的transform
键中key inpackage.json
想发布你的答案吗？：D@LeonGaban很高兴用简单的解决方案解决了问题您的coinStyles.json
文件中有一个小错误。如果您在文件中显示导致错误的部分，我们可以提供更多帮助。问题可能是您的package.json
中的jest配置。看看这是否能为你解决：@Pavindu在我的问题中添加了coinStyles.json，这是第一个键ada
@Rikin就是它！！！我需要将“^.+\.js？$”：“babel jest”
添加到我的jest的transform
键中key inpackage.json
想发布你的答案吗？：D@LeonGaban很高兴用简单的解决方案解决了这个问题谢谢，现在我只需要弄清楚如何在Nextjs中工作谢谢，现在我只需要弄清楚如何在Nextjs中工作
SyntaxError: /Users/leongaban/projects/Futuratum/moon.holdings/coinStyles.json: Unexpected token, expected ";" (2:7)
1 | {
> 2 | "ada": {
| ^
3 | "color": "#FFF",
4 | "backgroundColor": "#6297DF"
5 | },
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/>));
});
});
});
{
"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"
}
}