React、Typescript、Babel、Webpackを使用して、PrettierとEsLintを使用してプロジェクトをセットアップしました。プロジェクトを最初から設定し、すべてがうまく機能しました。しかし、私はJestを使い始めたばかりで、すべてが失敗したようです。私が抱えているこの同じエラーに関連するSOの質問をいくつか見てきましたが、同じ質問に対する答えはどれも私をまったく助けてくれませんでした。私はすでにこれで私の人生の1日を無駄にしていると感じています、そして私がしているのは役に立たないように見える追加の設定を追加することによって私の設定ファイルを肥大化させることです。この問題は特定のプロジェクト構成に関連していると感じていますが、問題が実際にどこにあるのかをデバッグまたは把握する方法がわかりません。
package.jsonファイル内（Jest、Enzyme、Babel関連の依存関係）：
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@types/enzyme": "^3.10.3",
"@types/enzyme-adapter-react-16": "^1.0.5",
"@types/jest": "^24.0.18",
"@types/shallowequal": "^1.1.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.4.0",
"jest": "^24.9.0",
"jest-environment-jsdom": "^24.9.0",
"jest-environment-jsdom-global": "^1.2.0"
},
is.config.js：
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { defaults } = require('jest-config');
module.exports = {
preset: 'ts-jest',
globals: {
'ts-jest': {
diagnostics: false
}
},
verbose: true,
snapshotSerializers: [
"<rootDir>/node_modules/enzyme-to-json/serializer"
],
transform: {
"^.+\\.js?$": "babel-jest",
"^.+\\.(ts|tsx)?$": "ts-jest"
},
testRegex: "(.(test))\\.(ts|tsx)$",
transformIgnorePatterns: [
"^.+\\.js$"
],
moduleFileExtensions: [ ...defaults.moduleFileExtensions, "ts", "tsx", "js", "json" ],
moduleDirectories: [
"node_modules",
"src"
],
moduleNameMapper: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetTransformer.js",
"\\.(css|less|scss)$": "<rootDir>/assetTransformer.js"
},
setupFilesAfterEnv: [
"<rootDir>/jest.setup.js"
],
coveragePathIgnorePatterns: [
"/node_modules",
"/src/root/i18n",
"jest.setup.js"
],
testEnvironment: "jsdom",
testMatch: ["**/__tests__/**/*.ts?(x)", "**/?(*.)+(test).ts?(x)"],
testURL: "http://localhost:8080"
}
is.setup.js：
// Import adapter for enzyme
import Enzyme, { configure, shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-localstorage-mock';
configure({ adapter: new Adapter() });
export { shallow, mount, render };
export default Enzyme;
// Log all jsDomErrors when using jsdom testEnvironment
window._virtualConsole &&
window._virtualConsole.on('jsdomError', function(error) {
console.error('jsDomError', error.stack, error.detail);
});
process.env = Object.assign(process.env);
babel.config.js：
module.exports = {
"presets": [
['@babel/preset-env', {targets: {node: 'current'}}],
['@babel/env', {loose:true}],
'@babel/preset-typescript',
'@babel/typescript',
'@babel/react'
],
"plugins": [
['@babel/proposal-class-properties', {loose:true}],
"dynamic-import-node",
"proposal-object-rest-spread",
"transform-class-properties",
"syntax-class-properties",
"transform-es2015-modules-commonjs",
"babel-plugin-transform-es2015-destructuring",
"babel-plugin-transform-object-rest-spread"
],
"env":{
"test": {
"presets": [
['@babel/preset-env', {targets: {node: 'current'}}],
['@babel/env', {loose:true}],
'@babel/preset-typescript',
'@babel/typescript',
'@babel/react'
],
"plugins": [
['@babel/proposal-class-properties', {loose:true}],
"dynamic-import-node",
"proposal-object-rest-spread",
"transform-class-properties",
"syntax-class-properties",
"transform-es2015-modules-commonjs",
"babel-plugin-transform-es2015-destructuring",
"babel-plugin-transform-object-rest-spread"
],
}
}
}
AssetTransformer.js：
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');
module.exports = {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
process(src, filename, config, options) {
return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
},
};
私がテストしようとしているcomponent.test.tsxファイル：
import React from 'react';
import { shallow } from 'enzyme';
import { Component} from './component';
describe ('Component', () => {
it('should render correctly with default parameters passed', () => {
const component = shallow(<Component />);
expect(component).toMatchSnapshot();
});
});
設定ファイルにどのような変更を加えても表示され続けるエラーメッセージ：
Test suite failed to run
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:
SyntaxError: ...\component.test.tsx: Unexpected token (9:30)
7 | describe ('Component', () => {
8 | it('should render correctly with default parameters passed', () => {
> 9 | const component = shallow(<Component />);
| ^
10 | expect(component).toMatchSnapshot();
11 | });
12 | });
at Parser.raise (node_modules/@babel/parser/lib/index.js:6325:17)
at Parser.unexpected (node_modules/@babel/parser/lib/index.js:7642:16)
at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:8841:20)
at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:8412:23)
at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:8392:21)
at Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:8267:23)
at Parser.parseMaybeConditional (node_modules/@babel/parser/lib/index.js:8240:23)
at Parser.parseMaybeAssign (node_modules/@babel/parser/lib/index.js:8187:21)
at Parser.parseExprListItem (node_modules/@babel/parser/lib/index.js:9491:18)
at Parser.parseCallExpressionArguments (node_modules/@babel/parser/lib/index.js:8621:22)
Windows10マシンでVSCodeを使用しています。プロジェクトは正常に実行され、コンポーネントの開発を続けてプロジェクトを続行できます。Jestを設定できません...
問題は、VSCodeのターミナルでjestを実行するだけで再現されます。
単一のテストに合格し、コンポーネントのスナップショットを作成することを期待しています。
それで、さらに掘り下げた後、私はなんとか答えを見つけて、これを機能させることができました。これが将来これに遭遇する可能性のある他の誰かに役立つことを願っています：
testRegexとtestMatchを一緒に使用しないでください。そこで、jest.config.jsファイルからtestRegexを削除しました。
jest.setup.jsファイルを更新します。から：
// Import adapter for enzyme
import Enzyme, { configure, shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-localstorage-mock';
configure({ adapter: new Adapter() });
export { shallow, mount, render };
export default Enzyme;
に：
const Enzyme = require('enzyme');
const Adapter = require ('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new Adapter() });
"paths": {
"@App/*": ["src/*"],
"@selectors/*": [ "ts/selectors/*" ],
"@actions/*": [ "ts/actions/*" ],
"@components/*": [ "ts/components/*" ],
"@middleware/*": [ "ts/middleware/*" ],
"@store/*": [ "ts/store/*" ],
"@reducers/*": [ "ts/reducers/*" ]
}
これらはjest.config.jsファイルに追加する必要があります。そうしないと、jestは「@ store /」宣言を読み取るのに苦労しているようです。
'moduleNameMapper'の下にこれらを追加しました：
moduleNameMapper: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetTransformer.js",
"\\.(css|less|scss)$": "<rootDir>/assetTransformer.js",
"@App/(.*)": "<rootDir>/src/$1",
"@selectors/(.*)": "<rootDir>/src/ts/selectors/$1",
"@actions/(.*)": "<rootDir>/src/ts/actions/$1",
"@components/(.*)": "<rootDir>/src/ts/components/$1",
"@middleware/(.*)": "<rootDir>/src/ts/middleware/$1",
"@store/(.*)": "<rootDir>/src/ts/store/$1",
"@reducers/(.*)": "<rootDir>/src/ts/reducers/$1"
}
そして、イェーイ...テストが実行されます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加