在 React-Native 项目上运行 jest 时出错

Question

在我的反应原生项目上运行测试套件时，以下错误不断出现。

/.../node_modules/@expo/react-native-action-sheet/ActionSheet.ios.js:3
import React from 'react';
^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:45)

以下是使用的测试代码。这是Jest中的简单快照测试

//ContactList Tests
import React from 'react';
import renderer from 'react-test-renderer';
import ContactList from '../components/ContactList';

//ContactList Snapshot
test('renders correctly', () => {
const tree = renderer.create(<ContactList />).toJSON();
expect(tree).toMatchSnapshot();
});

我正在运行反应本机版本 0.55.4 和 Jest 版本 23.6.0

Answer 1

我以前见过这个

来自开玩笑文档：

有时(特别是在 React Native 或 TypeScript 项目中)会发生第三方模块作为未转译发布的情况。由于 node_modules 中的所有文件默认情况下都不会转换，因此 Jest 将无法理解这些模块中的代码，从而导致语法错误。为了克服这个问题，你可以使用 transformIgnorePatterns 将此类模块列入白名单。你可以在 React Native Guide 中找到这个用例的一个很好的例子。

在他们提到的 React Native Guide 中，你可以从 package.json 中找到以下部分(这将嵌套在jest对象中)：

"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|react-native-button)/)"
]

这是一个具有负面展望的正则表达式，所以它说：在node_modules内部，任何不紧跟react-native、my-project或react-native-button的东西都将被忽略(而不是转换)。

或者为了简化这个双重否定，它将在node_modules中转换这三个包，但没有其他包。

在您的情况下，此正则表达式可能如下所示：

"node_modules/(?!(react-native|@expo/react-native-action-sheet)/)"

这将允许react-native和@expo/react-native-action-sheet被转译(我认为......你可能不得不稍微玩一下。可能有一些字符转义或其他一些包需要列入白名单)。