在React-Native项目上开玩笑时出错

Question

When running test suites on my react-native project the following errors keep appearing.

/.../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)

The following is the test code used. It is a simple snapshot test in 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();
  });

I am running react-native version 0.55.4 and Jest version 23.6.0

Answer 1

I've seen this before

From Jest docs :

Sometimes it happens (especially in React Native or TypeScript projects) that 3rd party modules are published as untranspiled. Since all files inside node_modules are not transformed by default, Jest will not understand the code in these modules, resulting in syntax errors. To overcome this, you may use transformIgnorePatterns to whitelist such modules. You'll find a good example of this use case in React Native Guide.

In the React Native Guide they mention, you'll find the following section from the package.json (this would be nested inside a jest object):

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

This is a RegExp with a negative lookahead, so it's saying: inside the node_modules , anything that isn't immediately followed by react-native , my-project , or react-native-button is to be ignored (not transformed).

Or to simplify this double-negative, it is going to transform those three packages inside of node_modules , but no others.

In your case, this regexp might look something like this:

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

This would allow both react-native and @expo/react-native-action-sheet to be transpiled (I think...you might have to play around with it a little. There may be some character escapes or some other packages that need to be white-listed).