React NativeComponentでJestを使用してテストを実行しようとしています。を使用しreact-native-modal
ます。私はJestと一般的な単体テストを初めて使用するため、この問題を修正する方法がわかりません。
transformIgnorePatterns
セットアップに:プロパティを追加しますが、問題は同じままです。
私の目標は、モーダルコンポーネントのプロパティをテストすることです。
実際のテスト:
import 'react-native';
import React from 'react';
import BottomModalComponent from './BottomModalComponent';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
test('renders BottomModalComponent.js', () => {
const tree = renderer.create(<BottomModalComponent isVisible={false} />).toJSON();
expect(tree).toMatchSnapshot();
});
.babelrcセットアップ
// File-relative configuration
{
"plugins": [
["@babel/plugin-proposal-class-properties", { "loose": true }],
],
"presets": [
"module:metro-react-native-babel-preset",
],
"retainLines": true
}
依存関係:
"dependencies": {
"babel-core": "7.0.0-bridge.0",
...
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.4.0",
"babel-eslint": "8",
"babel-jest": "23.6.0",
"babel-preset-react-native": "^4.0.1",
"jest": "23.6.0",
"jest-react-native": "^18.0.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.6.0-alpha.8af6728"
},
babel.config.js
// Project-wide configuration
module.exports = {
plugins: [
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
};
これは、私のpackage.jsonがJestセットアップでどのように見えるかです:
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(react-native|react-native-modal)/)"
]
},
これは私が実行したときの私のエラーですnpm run test
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".
SyntaxError: /project_name/node_modules/react-native-modal/src/index.js: Unexpected token (470:8)
468 | this.props.useNativeDriver &&
469 | !this.state.showContent ? (
> 470 | <animatable.View />
| ^
471 | ) : (
472 | children
473 | );
何か案は?
更新(修正)
しばらくデバッグした後、プロジェクト全体の構成(babel.config.js)に追加する必要があるという問題に気づきました。
"presets": [
"module:metro-react-native-babel-preset",
]
この行をローカル環境.bablerc
に追加しただけなので、JSXがネイティブコンポーネントに反応するバベルをトランスパイルする方法に問題が発生します。
つまり、両方のbabelセットアップが同じだったので、babel.config.jsを取り除くことができ、すべてが正常に機能します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加