Question

我正在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的顶部。

您会注意到，我什至没有在测试文件中编写任何测试，我只是想开个玩笑，直到它可以评估测试。

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

在添加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)

因此，出于多种原因，这对我而言没有任何意义。

LoginView在实际应用中呈现良好，没有“意外标识符”崩溃或警告或其他任何情况
第2行错误中的下箭头指向import，这当然应该是意外的。
然后上面的箭头指示react-native-elements的一行，所以，我对此一无所知。

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

即使是那样，我也不知道接下来要做什么。

更新

我输入了Brian答案中建议的代码，现在我遇到了所有新错误。即使错误提示已修复，也似乎无济于事-我在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)

Answer 1

react-native-elements包含ES6代码。

ES6代码需要先编译，然后才能由Jest运行。

默认情况下，Jest不会编译node_modules中的任何内容，但是react-native具有tells Jest to compile react-native and @react-native-community modules的jest-preset。

要包含react-native-elements，您需要通过adding the following to your Jest config告诉Jest对其进行编译：

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

SyntaxError：意外标识符-React Enzyme测试中无意义的错误

更新

1 个答案: