我在设置我的 jest 配置时遇到问题 react native 无法导入组件

问题描述

嘿，伙计们，我遇到了一些与 babel 配置或 package.json 文件有关的问题……简而言之，我无法从测试文件外部导入任何组件

错误如下：

 E:\.......\src\components\ButtonInstance.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'],};

文件夹结构

|__ 测试 |__ index.test.js

|__ node_modules

|__ 源代码 |__ 组件 |__ ButtonInstance.jsx

|__ babel.config.js

|__ package.json

请帮助并谢谢提前

解决方法

我已经解决了这个问题，它与 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)/)',};

如果有人知道为什么会发生这种“错误”行为，我不会标记此答案，请对此答案进行一些编辑或添加您自己的答案，然后我会将其标记为正确。