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

时间:2019-01-10 07:35:00

标签: reactjs react-native jestjs

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

1 个答案:

答案 0 :(得分:0)

在测试您正在使用组件导入时,例如:-

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();
    });
});