使用React-Native的JEST中意外的令牌导出

Question

我正在使用我们自己的库进行API调用。在devDependencies中，我指定了该库。如果运行npm install，我将在node_modules下获得该库。应用程序方面，它工作正常。

[当我尝试使用JEST时，我得到了意外的令牌。

请在下面的package.json中查找，

    {
      "name": "myApp",
       "version": "0.28.9",
       "description": "My APP",
       "main": "index.js",
       "scripts": {
         "test": "jest --verbose",
         "build": "babel index.js"
      },
      "dependencies": {
        "@test/myAPI": "*",
        "jest-cli": "^23.6.0",
        "react-native-linear-gradient": "^2.3.0",
        "react-native-popup-dialog": "^0.9.39",
        "react-navigation": "^1.0.0-beta.27",    
      },
      "devDependencies": {
        "babel-jest": "^22.4.4",
        "babel-plugin-transform-export-extensions": "^6.22.0",
        "babel-preset-react-native": "^4.0.0",
        "isomorphic-fetch": "^2.2.1",
        "jest": "22.1.2",
        "react": "^16.3.1",
        "react-native": "^0.55.4",
        "react-test-renderer": "16.2.0"
      },
      "jest": {
        "preset": "react-native"
      }
    }
    ```
    ```
    .babelrc
    {
      "presets": ["react-native"]
    }
    ```

Form the Jest, I ran the test. Then I got the following Error.
    ```
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export {
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      11 | } from "../data-providers";
      12 | import * as lString from "../../lang_en.json";
    > 13 | import { getAuthenticationInfo, submitRegistertrationResponse, ERROR } from "@test/myAPI";
         | ^
      14 | 
      15 | 
      16 | Date.prototype.monthNames = [

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/helpers/utils.js:13:1)
      at Object.<anonymous> (src/containers/RegistrationView/index.js:15:1)
    ```

Answer 1

同时测试您是否正在使用组件导入，例如：-

MyComponent.js

const MyComponent = () => {    }

export default connect(null, mapDisptchToProps)(AddItemScreen);

MyComponent.test.js

import React from 'react';
import { shallow } from 'enzyme';
import AddItemScreen from '../AddItemScreen';

describe('AddItemScreen', () => {
    const component = shallow (
        <AddItemScreen />
    );

    it('should render properly', () => {
        expect(component).toMatchSnapshot();
    });
});

在测试中应如何使用组件导入：-[不应使用具有其他依赖项（例如redux或withNavigation等）的组件导入]]] >>

MyComponent.js

export const MyComponent = () => {    }

export default connect(null, mapDisptchToProps)(AddItemScreen);
MyComponent.test.js
import React from 'react';
import { shallow } from 'enzyme';
import { AddItemScreen } from '../AddItemScreen';

describe('AddItemScreen', () => {
    const component = shallow (
        <AddItemScreen />
    );

    it('should render properly', () => {
        expect(component).toMatchSnapshot();
    });
});