时间戳

首页 > 解决方案 > SyntaxError: Unexpected identifier - React Enzyme 测试中的无意义错误

react-native - SyntaxError: Unexpected identifier - React Enzyme 测试中的无意义错误

问题描述

我正在使用 React Native 进行开发，并尝试按照https://airbnb.io/enzyme/docs/guides/react-native.html上的说明设置玩笑测试。

我想我已经正确设置了一切。这是我的配置：

//setup-tests.js

import "react-native";
import "jest-enzyme";
import Adapter from "enzyme-adapter-react-16";
import Enzyme from "enzyme";

 // Set up DOM in node.js environment for Enzyme to mount to
const { JSDOM } = require("jsdom");

const jsdom = new JSDOM("<!doctype html><html><body></body></html>");
const { window } = jsdom;

function copyProps(src, target) {
  Object.defineProperties(target, {
    ...Object.getOwnPropertyDescriptors(src),
    ...Object.getOwnPropertyDescriptors(target)
  });
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: "node.js"
};
copyProps(window, global);

// Set up Enzyme to mount to DOM, simulate events, and inspect the DOM in tests.
Enzyme.configure({ adapter: new Adapter() });

/* Ignore some expected warnings
 * see: https://jestjs.io/docs/en/tutorial-react.html#snapshot-testing-with-mocks-enzyme-and-react-16
 * see https://github.com/Root-App/react-native-mock-render/issues/6
 */
const originalConsoleError = console.error;
console.error = message => {
  if (message.startsWith("Warning:")) {
    return;
  }

  originalConsoleError(message);
};

// jest.config.js

module.exports = {
  setupFilesAfterEnv: "<rootDir>setup-tests.js"
};

// Test.test.js

import React from "react";
import renderer from "react-test-renderer";
import { mount, ReactWrapper } from "enzyme";
import { Provider } from "react-redux";
import { Text } from "react-native";

import LoginView from '../js/LoginView'

一会儿你就会看到顶部LoginView。

您会注意到我什至没有在测试文件中编写任何测试，我只是想让 jest 运行到可以评估测试的地步。

没有import LoginView, jest 运行并“失败”，因为我的测试套件必须包含至少一个测试。听起来不错。

添加import LoginView，我得到这个错误（它显示了顶部的导入语句LoginView：

    import Button from './buttons/Button';
           ^^^^^^

    SyntaxError: Unexpected identifier

      1 | import React, { Component } from "react";
    > 2 | import { Input, Button, Image } from "react-native-elements";
        | ^
      3 | import { Text, View } from "react-native";
      4 | import { connect } from "react-redux";
      5 | import F8StyleSheet from "./F8StyleSheet";

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (js/LoginView.js:2:1)

因此，出于多种原因，这对我来说没有意义。

  1. LoginView在实际应用程序中呈现良好，没有“意外标识符”崩溃或警告或任何东西
  2. 第 2 行错误中的下方箭头指向import，这当然不应该是意外的。
  3. 然后是上面的箭头，表示来自 的一行react-native-elements，所以，我不知道。

现在，我确实想到该jest.config.js文件确实需要我使用module.exports，并且在我尝试使用时失败/崩溃export default { setupFiles }（或者我尝试这样做，允许 VS Code 将其更新为 ES6 语法）。所以也许这就是它不喜欢的原因import。

即使是这样，我也不知道接下来该怎么办。

更新

我输入了布赖恩回答中建议的代码，现在我遇到了所有新错误。即使错误建议修复，它似乎也无济于事——我已将以下内容添加到我package.json的jest. Dimensions.js反正我不确定在哪里；另外，我会假设我为 React Native 所做的所有这些设置都知道如何识别拥有file.ios.js和file.android.js等价于file.

这是我按照说明进行的“修复”，这根本没有帮助。

 "moduleFileExtensions": [
      "js",
      "json",
      "jsx",
      "ts",
      "tsx",
      "node",
      "ios.js",
      "android.js"
    ]

这是新的错误。

 FAIL  tests/Test.test.js
  ● Test suite failed to run

    Cannot find module './Platform' from 'Dimensions.js'

    However, Jest was able to find:
        './Platform.android.js'
        './Platform.ios.js'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

    However, Jest was able to find:
        '../Utilities/Dimensions.js'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

    However, Jest was able to find:
        'buttons/Button.js'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

    However, Jest was able to find:
        '../js/LoginView.js'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:229:17)
      at Object.require (node_modules/react-native/Libraries/Utilities/Dimensions.js:14:18)

标签： react-nativeenzyme

解决方案

react-native-elements包含 ES6 代码。

ES6 代码需要编译才能运行Jest。

默认情况下Jest不编译任何东西，node_modules但react-native有一个jest-preset告诉编译和模块Jestreact-native@react-native-community。

要包括在内react-native-elements，您还需要通过将以下内容添加到您的配置Jest来告诉编译它：Jest

transformIgnorePatterns: [
  'node_modules/(?!(jest-)?react-native|@react-native-community|react-native-elements)',
]

推荐阅读