javascript - 无法从 'react-native-implementation.js' 找到模块

Question

我有以下 Jest 测试:

import React from 'react';
import IndexSign from '../IndexSign';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <IndexSign index={1}/>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

我正在调用的 IndexSign 组件调用此 StyleSheet 组件:

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
  //some styles
});

为了测试，我正在使用 Gulp:

gulp.task('tests', () => {
    process.env.NODE_ENV = 'test';
    return gulp.src('src').pipe(jest({
    }));
});

问题是当我运行这个测试时，我得到:

● Test suite failed to run

Cannot find module 'StyleSheet' from 'react-native-implementation.js'

  at Resolver.resolveModule (../node_modules/jest-resolve/build/index.js:142:17)
  at Object.StyleSheet (../node_modules/react-native/Libraries/react-native/react-native-implementation.js:98:25)
  at Object.<anonymous> (styles/Styles.js:5:13)

知道为什么会这样吗？

为什么它在 react-native-implementation.js 中搜索 StyleSheet 而不是我导入的 react-native？

为什么找不到StyleSheet？

Answer 1

我遇到了同样的问题。添加

"jest": {
    "preset": "react-native"
},

在 package.json 中为我修复了错误。

如果您保留单独的配置文件，例如 jest.config.js。在其中添加预设。检查示例配置文件

module.exports = {
  preset: 'react-native',
  setupFiles: ['<rootDir>/__test__/setup.js'],
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
    '^.+\\.(jpg|jpeg|gif|png|mp4|mkv|avi|webm|swf|wav|mid)$': 'jest-static-stubs/$1'
  },
  globals: {
    __DEV__: true
  },
  collectCoverageFrom: [
    '**/src/**/*.{js,jsx}',
    '!**/src/**/style.js',
    '!**/src/**/index.js',
    '!**/src/theme/**',
    '!**/android/**',
    '!**/ios/**',
    '!**/node_modules/**',
    '!**/scripts/**',
    '!**/__test__/**'
  ],
  verbose: true,
  testPathIgnorePatterns: ['/node_modules/'],
  testResultsProcessor: 'jest-sonar-reporter',
  testURL: 'http://localhost/'
}