Estoy probando algunos componentes React-Native. Por contexto, mis componentes se almacenan de la siguiente manera:
project -components --componentA ---ComponentA.js ---__test__ ----ComponentA.test.js --componentB ---ComponentB.js ---__test__ ----ComponentB.test.js --componentC ---ComponentC.js ---__test__ ----ComponentC.test.jsLos componentes tienen declaraciones de importación, como las siguientes:
import React from 'react'; import { Text, TouchableOpacity, View, StyleSheet} from 'react-native';Los componentes A y B se renderizaron con éxito y pasaron sus respectivas pruebas. El componente C no puede iniciar su conjunto de pruebas debido al error SyntaxError: no se puede usar la declaración de importación fuera de un módulo. Las importaciones para el Componente C son las siguientes:
import React from 'react'; import Constants from 'expo-constants'; import { View, Text, StyleSheet, TouchableOpacity, Image, ScrollView } from 'react-native'; import { COLORS } from '../../styles/COLORS'; import BackButton from '../widgets/BackButton'; import backImage from '../../../assets/navigation/leftArrow.png'; import { SECTIONS } from './consts'; import setStatusBarColor from '../utils/StatusBarColorFunctions';El error apuntaba a la línea 2, donde se importa Constantes. Comenté la línea y ejecuté la prueba nuevamente, y luego señalé la declaración de importación para Ver, Texto, etc., particularmente en TouchableOpacity. Leí algunas otras publicaciones que agregan "tipo": "módulo" al archivo package.json podría resolver el problema, pero no tuve problemas con los otros dos componentes que se sometieron a pruebas similares. Si cambio el archivo para requerir declaraciones en lugar de declaraciones de importación, se resuelve el problema, pero las declaraciones de importación se usan para los otros archivos y mis pruebas se ejecutan correctamente. ¿Hay alguna razón por la que este archivo en particular tenga problemas en comparación con los demás, cuando están en los mismos directorios?
También soy bastante nuevo en este sitio, por lo que si necesita más información, hágamelo saber. ¡Gracias por adelantado!
Actualización: también estoy experimentando esto con otros archivos. Si alguien tiene sugerencias, por favor hágamelo saber!
todo lo que necesita es una propiedad en yow package.json
{ "name": "project", "version": "1.0.0", .... "type": "module", .... }agregue la propiedad del módulo de tipo en su paquete o si está usando babel, asegúrese de que la primera línea de código leído sea
request("@babel/register");