如何解决React Native组件Jest测试遇Unexpected Token错误问题？

I’ve tackled this exact issue before with React Native Web setups, so let’s walk through the fixes step by step—since your library works in production but fails tests, the problem lies in how Jest is handling React Native-specific syntax and dependencies that aren’t being transpiled correctly.

1. Fix transformIgnorePatterns (You Were Close!) #

Your initial attempt to exclude your library from transformIgnorePatterns is on the right track, but you’re likely missing other React Native-related packages that also need transpiling. Jest ignores all node_modules by default, but packages like react-native-web itself, your component library, and any other React Native dependencies (e.g., @react-native-community/*) use untranspiled ES6+ or React Native-specific syntax that Jest can’t parse.

Update your Jest config to include all relevant packages:

{
  "transformIgnorePatterns": [
    "node_modules/(?!(react-native-my-lib|react-native-web|react-native|@react-native)/)"
  ]
}

The (?!...) negative lookahead tells Jest to not ignore these packages—meaning it will run them through your Babel transformer.

2. Configure Babel & Jest Transform Rules #

Make sure Jest is using babel-jest to handle TypeScript and React Native Web transpilation, and your Babel config includes the necessary presets/plugins for RNW.

Jest Config Transform Section #

Add this to your jest.config.js (or package.json Jest section):

module.exports = {
  transform: {
    // Handle TypeScript and JSX files with babel-jest
    '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
    // If your library uses .native.js files, include this too
    '^.+\\.native\\.(js|jsx)$': 'babel-jest'
  },
  // Set test environment to jsdom for web (critical for RNW)
  testEnvironment: 'jsdom'
};

Babel Config (babel.config.js) #

Ensure your Babel setup supports React Native Web and TypeScript:

{
  "presets": [
    "react-native",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    "react-native-web"
  ]
}

Note: For React Native 0.55.3, you’ll need compatible Babel 7 dependencies—double-check that @babel/core, @babel/preset-env, and babel-jest are installed in versions that work with RN 0.55.3.

3. Mock Non-JavaScript Resources #

React Native components often import images, fonts, or styles—Jest can’t parse these binary files, so you need to mock them.

Add moduleNameMapper to Jest Config #

{
  "moduleNameMapper": {
    // Mock image files
    "\\.(png|jpg|jpeg|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",
    // Mock style files (if your library uses CSS/SCSS)
    "\\.(css|scss|less)$": "<rootDir>/__mocks__/styleMock.js",
    // Map react-native imports to react-native-web for tests
    "^react-native$": "react-native-web"
  }
}

Create Mock Files #

• __mocks__/fileMock.js:

  module.exports = 'test-file-stub';
  

• __mocks__/styleMock.js:

  module.exports = {};
  

4. Clear Jest Cache #

Jest caches transformed files aggressively, so even after fixing your config, old cached code might still cause errors. Run this command to clear the cache:

jest --clearCache

5. Verify Component Library Imports #

Double-check that your test files are importing components from your library correctly. Avoid relative paths that might resolve to untranspiled source files—use the published package name (e.g., import { MyComponent } from 'react-native-my-lib') instead of importing from ../src.

Full Example Jest Config #

Putting it all together, your jest.config.js should look something like this:

module.exports = {
  preset: 'react-native',
  transform: {
    '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
    '^.+\\.native\\.(js|jsx)$': 'babel-jest'
  },
  transformIgnorePatterns: [
    'node_modules/(?!(react-native-my-lib|react-native-web|react-native|@react-native)/)'
  ],
  moduleNameMapper: {
    "\\.(png|jpg|jpeg|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|scss|less)$": "<rootDir>/__mocks__/styleMock.js",
    "^react-native$": "react-native-web"
  },
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

If you still run into issues, check the exact error message to see which file is causing the token error—this will tell you if there’s another dependency you need to add to transformIgnorePatterns or a file type you haven’t mocked yet.

内容的提问来源于stack exchange，提问作者Rahul Singh