我在我的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');
型
1条答案
按热度按时间70gysomp1#
首先,我认为它与打字问题有关,我尝试了所有的技巧和解决方案,我花了几个小时在这里,但实际上它根本没有。
mix-jest不能模拟**“expo”**,所以我们可以将入口点拆分为index.tsx:
字符串
答案:https://github.com/expo/expo/issues/13026
不要忘记更改package.json中的入口点