Jeest에서 예기치 않은 토큰이 발견되었습니다.
왜 이 회선에 불만이 있는지 알 수 없습니다.
const wrapper = shallow(<BitcoinWidget {...props} />);
/Users/leongaban/projects/match/bitcoin/src/components/bitcoinWidget.test.js: Unexpected token (17:26)
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
- To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
- If you need a custom transformation specify a "transform" option in your config.
- If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
15 |
16 | describe('when rendering', () => {
>17 | const wrapper = shallow(<BitcoinWidget {...props} />);
18 | ^
19 | it('should render a component matching the snapshot', () => {
20 | const tree = toJson(wrapper);
전체 테스트:
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
// Local components
import BitcoinWidget from './bitcoinWidget';
const props = {
logo: 'foobar',
coin: {
price: 0
},
refresh: jest.fn()
}
describe('when rendering', () => {
const wrapper = shallow(<BitcoinWidget {...props} />);
it('should render a component matching the snapshot', () => {
const tree = toJson(wrapper);
expect(tree).toMatchSnapshot();
expect(wrapper).toHaveLength(1);
});
});
컴포넌트
import React from 'react';
const BitcoinWidget = ({ logo, coin : { price }, refresh }) => {
return (
<div className="bitcoin-wrapper shadow">
<header>
<img src={logo} alt="Bitcoin Logo"/>
</header>
<div className="price">
Coinbase
${price}
</div>
<button className="btn striped-shadow white" onClick={refresh}>
<span>Refresh</span>
</button>
</div>
);
}
export default BitcoinWidget;
그리고 내 소포.json
{
"name": "bitcoin",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "yarn run test-jest:update --verbose --maxWorkers=2",
"test-jest:update": "jest src --updateSnapshot",
"test-jest": "jest src"
},
"now": {
"name": "bitcoin",
"engines": {
"node": "8.11.3"
},
"alias": "leongaban.com"
},
"jest": {
"verbose": true,
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/client/assetsTransformer.js"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"devDependencies": {
"enzyme": "^3.4.4",
"enzyme-to-json": "^3.3.4",
"jest": "^23.5.0"
}
}
이 항목을 에 추가합니다.package.jsonjest config를 지정합니다.
"transform": {
"\\.js$": "<rootDir>/node_modules/babel-jest"
},
아직 문제가 해결되지 않으면 알려주세요.
create-react-app을 사용하는 모든 사용자의 경우 패키지로 변경할 수 있는 것은 특정 joke 설정뿐입니다.create-module-app을 사용하는 경우 json을 선택합니다.
Jeest가 내부 라이브러리를 찾는 데 문제가 있습니다. Jeest는 이 라이브러리에서 가져오면 어디서든 '예기치 않은 토큰' 오류를 표시했습니다.
이 문제를 해결하려면 테스트 스크립트를 다음과 같이 변경할 수 있습니다."test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(<your-package-goes-here>)/)'",
이 문제와 씨름하고 있는 분들을 위해 상기 답변 중 어느 것도 도움이 되지 않았습니다.
약 오랜 시간 탐색한 후, 나는 이 해결책을 찾아냈다.
jeast.config.module을 편집하여 추가합니다.
//jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
testMatch: ["**/__tests__/**/*.ts?(x)", "**/?(*.)+(test).ts?(x)"],
transform: {
"^.+\\.(js|ts)$": "ts-jest",
},
transformIgnorePatterns: [
"/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.js$",
"/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.ts$",
"/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.tsx$",
],
}
무시하고 싶은 패키지를 안에 넣고 분리한다.
나 같은 경우에는[@autofiy/autofiyable|@autofiy/property]
Webpack을 사용하여 만든 리액트 앱에서 Jest를 셋업할 때도 같은 오류가 발생하였습니다.덧붙여야만 했다@babel/preset-env고쳐졌어요.저도 같은 내용의 블로그 기사를 쓴 적이 있습니다.
npm i -D @babel/preset-env
그리고 나서 이것을 의 "presets"에 추가합니다..babelrc파일(예:
{
"presets": ["@babel/react", "@babel/env"]
}
나는 나의 농담 업데이트에 추가했다.package.json
"jest": {
"transformIgnorePatterns": [
"node_modules/(?!(<package-name>|<second-package-name>)/)"
]
},
자유롭게 제거하세요.|<second-package-name>필요하지 않은 경우.
@paulosullivan22에서 언급한 대로 스크립트의 일부로도 할 수 있습니다.
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(<package-name>)/)'"
제 경우, 문제는 원래 모듈을 시뮬레이션된 모듈로 Import하는 것이었습니다.
import urlExist from "url-exist";
async function stubbedUrlExist(): Promise<boolean> {
// do something
}
export default stubbedUrlExist;
해결책은 Import하지 않는 것이었습니다.url-exist에서url-exist가짜예요. 순환 수입으로 이어졌을 수도 있어요.Jest는 모듈 로딩에 관한 일반적인 캐치블록에서 이 에러를 검출하고 있었을 가능성이 있습니다.
아래가 좋습니다.babel.config.js 파일을 만듭니다.
module.exports = {
presets: [
[ '@babel/preset-env', { targets: { esmodules: true } } ],
[ '@babel/preset-react', { runtime: 'automatic' } ],
],
};
일부 종속성(반응, 농담 등)을 업데이트하고 다음 오류도 표시했습니다.
Jest에 예기치 않은 토큰이 발생했습니다. SyntaxError: 모듈 외부에서 가져오기 문을 사용할 수 없습니다.
나는 전사가 필요한 것과 일탈이 있었다.
내가 처음 한 일은 처음부터 다시 시작하는 것이었다.
$ jest --init
이제 jeast.config.js가 생성됩니다(제스트 설정을 package.json으로 하기 전).
자세한 내용은 오류 메시지에서 보고 모듈을 볼 수 있습니다.이 모듈은 다음과 같습니다.
상세: /<project_root>/node_modules/axios/index.js:1
다음 트랜스폼무시를 jest.config.js에 추가하면 문제가 해결되었습니다.
transformIgnorePatterns: [
"node_modules/(?!axios.*)"
],
이제 Axios 모듈이 올바르게 번역되었고 더 이상 문제가 발생하지 않았습니다. 이것이 도움이 되기를 바랍니다!
아래가 좋습니다.
module.exports = {
presets: [
["@babel/preset-env", { targets: { node: "current" } }],
"@babel/preset-typescript", "@babel/react"
]
};
트랜스폼을 사용할 수 없어서 의존성을 조롱하게 되었습니다.
<path>/react-markdown.js 파일을 만듭니다.
import React from 'react';
function ReactMarkdown({ children }){
return <>{children}</>;
}
export default ReactMarkdown;
jeast.config.js 파일 추가 시:
module.exports = {
moduleNameMapper: {
'react-markdown': '<path>/mocks/react-markdown.js',
},
};
https://github.com/remarkjs/react-markdown/issues/635에서 juanmartinez로 크레딧을 보내드립니다.
언급URL : https://stackoverflow.com/questions/51994111/jest-encountered-an-unexpected-token
'programing' 카테고리의 다른 글
| Node.js 아래에 JSON을 쉽게 저장하는 방법 (0) | 2023.03.28 |
|---|---|
| Oracle에서 CLOB 열의 크기를 바이트 단위로 가져오는 방법 (0) | 2023.03.28 |
| 노드 사스는 개발입니까, 아니면 React 프로젝트에 의존합니까? (0) | 2023.03.28 |
| 현재 JSON 어레이(예: [1, 2, 3])를 유형으로 역직렬화할 수 없습니다. (0) | 2023.03.28 |
| Angular의 개요JS 및 각도서로 관련된 UI? (0) | 2023.03.28 |