类型错误:无法读取null的属性(阅读“match”)expo jest与registerRootComponent

uqcuzwp8  于 8个月前  发布在  Jest
关注(0)|答案(1)|浏览(70)

我在我的expo项目中使用jest编写测试,但是当我试图测试App组件时出现了一个问题,我无法解决。
所有的答案将不胜感激。

TypeError:无法读取null的属性(阅读“match”)

package.json

"dependencies": {
 "jest": "^29.2.1",
  "jest-expo": "^49.0.0",
 "react-test-renderer": "^18.2.0",
 "ts-node": "^10.9.1",
},
"devDependencies": {
    "@babel/core": "^7.20.0",
    "@jest/types": "^29.6.3",
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "^12.3.0",
    "@types/jest": "^29.5.6",
    "@types/react": "~18.2.14",
    "@types/react-native": "^0.72.2",
    "@typescript-eslint/eslint-plugin": "^6.8.0",
    "@typescript-eslint/parser": "^6.8.0",
    "eslint": "^8.2.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-config-universe": "^12.0.0",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-react": "^7.33.2",
    "prettier": "^3.0.3",
    "ts-jest": "^29.1.1",
    "typescript": "^5.1.3"
  },

字符串
App.tsx

import 'react-native-gesture-handler';
import { registerRootComponent } from 'expo';
import React, { useState, useEffect,useCallback } from "react";
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { StyleSheet, Text, View,ScrollView,SafeAreaView,PixelRatio } from 'react-native';
import RootDrawerNavigator from './navigation/rootDrawerNavigator/RootDrawerNavigator'

SplashScreen.preventAutoHideAsync();
const App = () =>  {
  const designResolution = {
    width: 1528,
    height: 750
   }
   console.log(PixelRatio.getFontScale())

  const [fontsLoaded, fontError] = useFonts({
    'DMRegular': require('./assets/fonts/DMSans-Regular.ttf'),
    'DMMedium': require('./assets/fonts/DMSans-Medium.ttf'),
    'DMBold': require('./assets/fonts/DMSans-Bold.ttf'),
    'DMLight': require('./assets/fonts/DMSans-ExtraLight.ttf'),
  });
  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded || fontError) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null;
  }
  return (
        <RootDrawerNavigator />
  );
}

registerRootComponent(App);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App


App.test.tsx

import * as React from 'react';
import { screen, render, fireEvent ,waitFor} from '@testing-library/react-native';
import {expect, jest, test} from '@jest/globals';
import '@testing-library/jest-native/';
import { NavigationContainer } from '@react-navigation/native';
import renderer from "react-test-renderer"
import { ClientStoreStack, RootDrawerNavigator } from '../../navigation';
import { DashboardScreen } from '../../screens';
import  App  from '../../App';

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

describe('render correctly', () => {
  it('renders App', () => {
    const tree = renderer
    .create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
  });
});


jest.config.ts

import type {Config} from 'jest';

const config: Config = {
  verbose: true,

    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
    ],
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{}",
      "!**/coverage/**",
      "!**/node_modules/**",
      "!**/babel.config.js",
      "!**/jest.setup.ts",
      "!**/pettierrc.js",
      "!**/eslintrc.js"
    ],
    "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect",
    "<rootDir>/src/jest.setup.ts"],
    "setupFiles": [
      
    ],
    
};

export default config;


setup.jest.ts //用于react导航

import '@testing-library/jest-native/extend-expect';
import 'react-native-gesture-handler/jestSetup';
import {expect, jest, test} from '@jest/globals';

jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');

  Reanimated.default.call = () => {};

  return Reanimated;
});

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

70gysomp

70gysomp1#

首先,我认为它与打字问题有关,我尝试了所有的技巧和解决方案,我花了几个小时在这里,但实际上它根本没有。

mix-jest不能模拟**“expo”**,所以我们可以将入口点拆分为index.tsx:

import App from './src/App';
import { registerRootComponent } from 'expo';

registerRootComponent(App);

字符串
答案:https://github.com/expo/expo/issues/13026
不要忘记更改package.json中的入口点

相关问题