React-Native / Enzyme挂载返回空对象

Question

我正在尝试使用jest，expo-jest和酶为React-Native建立测试环境。 我面临的问题是mount返回一个空的ReactWrapper对象，我无法弄清楚为什么以及如何解决此问题。

问题：

Expected react-native/jest-preset to define transform[^.+\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$]
react-native/jest-preset contained different transformIgnorePatterns than expected
 PASS  src/modules/Auth/__tests__/component.enzyme.test.js (5.255 s)
  ● Console

    console.log
      ReactWrapper {}

      at Object.<anonymous> (src/modules/Auth/__tests__/component.enzyme.test.js:33:17)

 › 1 snapshot written.
 PASS  src/__tests__/component.enzyme.test.js (5.431 s)

Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   1 written, 2 passed, 3 total
Time:        6.78 s
Ran all test suites.

项目设置：

我的测试文件：

/**
 * @jest-environment jsdom
 */
import React from 'react'
import toJson from 'enzyme-to-json'
import { shallow, render, mount } from 'enzyme'
import { View, Text } from 'react-native'

const TestComponent = () => {
    return (
        <View>
            <Text testID="test">Hello, world!</Text>
        </View>
    )
}

it('it works', () => {
    expect(true).toBeTruthy()
})

describe('testing with enzyme', () => {

    test('test component shallow', () => {
        const wrapper = shallow(<TestComponent />)

        expect(toJson(wrapper)).toMatchSnapshot()
    })

    test('login mounts', () => {

        const wrapper = mount(<TestComponent />);                     

        console.log(wrapper)

        expect(wrapper.findWhere((node) => node.prop('testID') === 'test')).toBeTruthy();
        expect({}).toBeTruthy();

        expect(toJson(wrapper)).toMatchSnapshot()

    })
})

我的package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/blur": "^3.6.0",
    "@react-native-community/datetimepicker": "^2.4.0",
    "@react-native-community/masked-view": "0.1.6",
    "@react-native-community/netinfo": "^5.9.0",
    "@react-navigation/bottom-tabs": "^5.5.0",
    "@react-navigation/native": "^5.4.3",
    "@react-navigation/stack": "^5.4.0",
    "axios": "^0.19.2",
    "expo": "^37.0.12",
    "expo-font": "~8.1.0",
    "expo-image-picker": "~8.1.0",
    "npm": "^6.14.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-axios": "^0.17.1",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-navigation": "^6.6.2",
    "react-native-reanimated": "~1.7.0",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-ui-lib": "^5.8.1",
    "react-native-web": "~0.11.7",
    "rxjs": "^6.5.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "@testing-library/jest-native": "^3.1.0",
    "@testing-library/react-native": "^5.0.3",
    "babel-jest": "^26.0.1",
    "babel-preset-expo": "~8.1.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.4",
    "jest": "^26.0.1",
    "jest-enzyme": "^7.1.2",
    "jest-expo": "^37.0.0",
    "jest-fetch-mock": "^3.0.3",
    "jsdom": "^16.2.2",
    "react-native-mock": "^0.3.1",
    "react-native-mock-render": "^0.1.9",
    "react-test-renderer": "^16.13.1"
  },
  "private": true,
  "jest": {
    "preset": "jest-expo",
    "testEnvironment": "node",
    "setupFiles": [
      "<rootDir>setup-tests.js"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>jest.setup.js",
      "@testing-library/jest-native/extend-expect"
    ],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "moduleFileExtensions": [
      "js",
      "json",
      "jsx"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|react-native-ui-lib|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base)"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  }
}

我的setup-tests.js

const { JSDOM } = require('jsdom');

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter(prop => typeof target[prop] === 'undefined')
    .map(prop => Object.getOwnPropertyDescriptor(src, prop));
  Object.defineProperties(target, props);
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
copyProps(window, global);

// Setup adapter to work with enzyme 3.2.0
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

// Ignore React Web errors when using React Native
console.error = (message) => {
  return message;
};

require('react-native-mock-render/mock');

我的jest.setup.js

import {NativeModules, AccessibilityInfo} from 'react-native';

NativeModules.StatusBarManager = {getHeight: jest.fn()};
jest.spyOn(AccessibilityInfo, 'isScreenReaderEnabled').mockImplementation(() => new Promise.resolve(false));

// mock native modules
jest.mock('@react-native-community/blur', () => {});
jest.mock('@react-native-community/netinfo', () => {});

module.exports = {    
    // resolves from test to snapshot path
    resolveSnapshotPath: (testPath, snapshotExtension) =>
      testPath.replace('__tests__', '__snapshots__') + snapshotExtension,

    // resolves from snapshot to test path
    resolveTestPath: (snapshotFilePath, snapshotExtension) =>
      snapshotFilePath
        .replace('__snapshots__', '__tests__')
        .slice(0, -snapshotExtension.length),

    // Example test path, used for preflight consistency check of the implementation above
    testPathForConsistencyCheck: 'some/__tests__/example.test.js',    
};

我的babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};