我在设置我的开玩笑配置时遇到问题 反应本机 无法导入组件

Question

我遇到了一些问题，可能与babel configs或package.json文件有关。。。简而言之，我无法从测试文件外部导入任何组件

这是错误：

E:.......srccomponentsButtonInstance.jsx:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                       ^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import React from 'react';
2 | import { render, fireEvent } from '@testing-library/react-native';
> 3 | import ButtonInstance from '../src/components/ButtonInstance';
| ^
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (__tests__/index.test.js:3:1)

这是我的测试文件：

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import ButtonInstance from '../example/src/ButtonInstance';
test('Button', () => {
const onPressMock = jest.fn();
const { getByText } = render(<ButtonInstance onPress={onPressMock} />);
fireEvent.press(getByText('Press me'));
expect(onPressMock).toHaveBeenCalledTimes(1);
});

这是我的按钮实例组件

import React from 'react';
import { Text, TouchableHighlight } from 'react-native';
export default function ButtonInstance(onPress) {
return (
<TouchableHighlight onPress={onPress}>
<Text>Press me</Text>
</TouchableHighlight>
);
}

package.json文件

{
"name": "components-example",
"description": "Example app",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start"
},
"dependencies": {
"@iconscout/react-native-unicons": "^1.0.3",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-svg": "^9.5.3",
"react-native-svg-transformer": "^0.14.3"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/runtime": "^7.12.5",
"babel-plugin-module-resolver": "^4.0.0",
"metro-react-native-babel-preset": "^0.64.0"
}
}

和最后一个文件babel.config.js

module.exports = {
presets: [
'@babel/preset-flow',
'@babel/preset-react',
[
'@babel/preset-env',
{
targets: {
node: '10',
},
bugfixes: true,
},
],
],
plugins: ['@babel/plugin-proposal-class-properties'],
};

文件夹结构

|__ __tests__
|__ index.test.js
|__ node_modules
|__ src
|__ components
|__ ButtonInstance.jsx
|__ babel.config.js
|__ package.json

Answer 1

我已经解决了这个问题，它以某种方式与babel配置有关。你可以将这些文件添加到你的应用程序中，这是新的babel工作配置文件(也许它对某人有帮助(：

babel.config.js

module.exports = (api) => {
api.cache(true);
return {
env: {
development: {
plugins: [
[
'module-resolver',
{
root: ['./src'],
extensions: ['.js', '.jsx'],
},
],
],
},
},
presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
};
};

和笑话配置文件：

jest.config.js

module.exports = {
preset: 'react-native',
moduleFileExtensions: ['js', 'jsx', 'json', 'svg'],
testRegex: '(/__tests__/.*|(\.|/)(test|spec))\.(js|ts)x?$',
transform: {
'^.+\.jsx?$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
'^.+\.svg$': 'jest-svg-transformer',
},
testPathIgnorePatterns: ['\.snap$', '<rootDir>/node_modules/'],
cacheDirectory: '.jest/cache',
transformIgnorePatterns: [
'node_modules/(?!(react-native|react-navigation|react-navigation-tabs|react-navigation-redux-helpers|react-native-safari-view|react-native-linear-gradient|react-native-blur|react-native-animatable|react-native-wkwebview-reborn|react-native-safe-area-view|react-native-popup-menu|redux-persist)/)',
],
};