使用 React-Native 在 JEST 中意外导出令牌答案

【问题标题】：Unexpected token export in JEST with React-Native使用 React-Native 在 JEST 中意外导出令牌
【发布时间】：2019-01-10 07:34:59
【问题描述】：

我正在使用我们自己的库进行 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)
    ```

【问题讨论】：

我遇到了与import fetch ... 相同的问题
您好，我将 .babelrc 更改为 babel.config.js，结构如下：module.exports = function(api) { api.cache(true); const presets = [ ... ]; const plugins = [ ... ]; const env = { ... }; return { presets, plugins, env }; }; 并且成功了！

标签： reactjs react-native jestjs

【解决方案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();
    });
});

【讨论】：