如何配置 Jest 以处理所有导入？

Question

I am new to Jest and trying to figure out how to configure it to connect with files that uses web app, expo and many different imports.

my error

AIL screens/hiveInspection/HiveHealth.test.js ● Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/../../tm-repo-se-team-5-a-hive-management-system/screens/hiveInspection/HiveHealth.js:1
import React, { useState } from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module

> 1 | hiveHealthTest = require("./HiveHealth");
    |                  ^
  2 | 
  3 | test('Lets see if hiveHealth connects', () => {
  4 |     expect(hiveHealthTest.expect(false));

imports in trial file (it applies to all the files with a bunch of imports

import React, { useState } from "react";
import { StyleSheet, View, TouchableOpacity, Text, ImagePropTypes, Button, Modal, Alert } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Audio } from "expo-av";
import * as ImagePicker from 'expo-image-picker'

import SectionTitle from "../../components/sectionTitle";
import FormItem from "../../components/formItem";
import StarBox from "../../components/starBox";
import Colors from "../../constants/colors";
import ExpoStatusBar from "expo-status-bar/build/ExpoStatusBar";

my package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "test": "jest",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "^3.0.9",
    "expo": "~39.0.2",
    "expo-av": "~8.6.0",
    "expo-image-picker": "~9.1.0",
    "expo-sqlite": "~8.4.0",
    "expo-status-bar": "~1.0.2",
    "moment": "^2.29.1",
    "react": "16.13.1",
    "react-datepicker": "^3.3.0",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
    "react-native-elements": "^3.0.0-alpha.1",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-masked-text": "^1.13.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@babel/preset-env": "^7.12.11",
    "jest": "^26.6.0",
    "jest-expo": "^40.0.2",
    "mocha": "^8.2.1",
    "react-test-renderer": "^17.0.1",
    "react-unit-test-generator": "^1.11.0"
  },
  "jest": {
    "verbose": true,
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy",
      "\\.(gif|ttf|eot|svg)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json" ],
    "moduleDirectories": [
      "node_modules", "bower_components", "shared"
    ],
    "transform": {
  
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
    },
    "transformIgnorePatterns": ["../node_modules/"]
  },
  "private": true
}

Answer 1

first: Are you using react-test-renderer ?

With jest is different you need to have enzyme with it along with babel config. https://enzymejs.github.io/enzyme/