笑话：使用反应导航的意外令牌导出

Question

经过两天的研究，我终于没有想法了。

问题是一个组件使用来自React-Navigation 的withNavigation。

当我运行 Jest 时，它抱怨意外的令牌导出 (React-Navigation)，指向 withNavigation。

由于其他第三方库（如Native Base）也有同样的问题，所以我推断transformIgnorePatterns肯定有问题。例如，我在很多其他人中尝试过这个solution，它们或多或少相似。我还尝试调整 babel.config，正如 GitHub 的另一篇文章中所建议的那样。没有任何作用！也许有人有任何想法？请不要让我使用TypeScript。

这里是Jest 部分，如果我的package.json：

  ...
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
      "\\.(ts|tsx)$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.jest.json"
      }
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|native-base|react-navigation|react-native-fabric)"
    ],
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"
  }

jest.config.js：

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

tsconfig.jest.json:

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs"
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "noImplicitAny": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

babel.config.js：

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    '@babel/preset-typescript',
  ],
};

组件（测试）：

imports ...

type Props = {}

const Test: React.FC<Props> = ({}) => {
  return (
    <View testID="test" style={styles.container}>
      <View>
        <Text testID="home">Home</Text>
        <ButtonNavigate title="Home" navigateTo="About" />
      </View>
    </View>
  );
};

export default withNavigation(Test);

还有测试：

import React from 'react';
import {render, fireEvent} from 'react-native-testing-library';

import Test from '../Test';

// NativeAnimatedHelper is not mocked by default on react native's jest setup file.
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
//jest.mock('react-navigation', () => ({withNavigation: component => component}));

describe('Test', () => {
  test('rendering a component that uses withNavigation', () => {
    const {getByTestId} = render(
      <Test navigation={navigation}></Test>,
    );
    expect(getByTestId('test').toBeDefined());
  });
});

提前感谢，如果有人可以提供帮助。

Answer 1

这对我有用：

jest.mock('react-navigation', () => ({
  withNavigation: (Component) => (props) => (
    <Component navigation={{ navigate: jest.fn() }} {...props} />
  ),
}))

告诉我它是否也适合你。