Jest с Enzyme для React Native, бросая отсутствующий вызов super () в конструкторе - PullRequest
Новая
       43

Jest с Enzyme для React Native, бросая отсутствующий вызов super () в конструкторе

0 голосов
/ 24 января 2019

Возникли проблемы с настройкой и работой, вот моя среда 

Environment:
  OS: macOS 10.14.2
  Node: 8.9.0
  Yarn: 1.5.1
  npm: 6.4.1
  Watchman: 4.9.0
  Xcode: Xcode 10.1 Build version 10B61
  Android Studio: 3.2 AI-181.5540.7.32.5056338

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

Вот конфигурация jest в моем package.json

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|react-navigation)/"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 80
      }
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "snapshotSerializers": ["enzyme-to-json/serializer"],
    "setupTestFrameworkScriptFile": "./setup-tests.js",
    "setupFiles": ["./setup.js"]
  }

В *Файл 1009 * У меня есть эта установка 

import 'react-native';
import 'jest-enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Enzyme from 'enzyme';

/**
 * Set up DOM in node.js environment for Enzyme to mount to
 */
const { JSDOM } = require('jsdom');

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

function copyProps(src, target) {
  Object.defineProperties(target, {
    ...Object.getOwnPropertyDescriptors(src),
    ...Object.getOwnPropertyDescriptors(target),
  });
}

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

/**
 * Set up Enzyme to mount to DOM, simulate events,
 * and inspect the DOM in tests.
 */
Enzyme.configure({ adapter: new Adapter() });

/**
 * Ignore some expected warnings
 * see: https://jestjs.io/docs/en/tutorial-react.html#snapshot-testing-with-mocks-enzyme-and-react-16
 * see https://github.com/Root-App/react-native-mock-render/issues/6
 */
const originalConsoleError = console.error;
console.error = (message) => {
  if (message.startsWith('Warning:')) {
    return;
  }

  originalConsoleError(message);
};

И setup.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

, которую я получил с этой страницы на сайте фермента

https://airbnb.io/enzyme/docs/guides/react-native.html

Версии зависимости: 

"babel-core": "^6.26.3",
"babel-jest": "23.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react-native": "4.0.1",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"enzyme-to-json": "^3.3.5",
"jest": "23.6.0",
"jest-enzyme": "^7.0.1",
"jest-serializer-enzyme": "^1.0.0",
"jsdom": "^13.2.0",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.7.0",
"react-native-mock-render": "^0.1.2",
"react-test-renderer": "16.3.1"

Конкретная ошибка, которую я получаю: 

***/node_modules/jsdom/lib/jsdom/living/generated/Element.js: missing super() call in constructor

        15 | 
        16 | class Element extends Node.interface {
      > 17 |   constructor() {
           |   ^
        18 |     throw new TypeError("Illegal constructor");
        19 |   }
        20 |

Я пробовал несколько различных конфигураций для этого и, похоже, не могуобойти эту ошибку.

Вот тестовый файл 

import 'react-native';
import React from 'react';
import {Login} from './index';
import { mount } from 'enzyme';


it('renders correctly', () => {
  const wrapper = mount(
    <Login />
  );
  expect(wrapper).toMatchSnapshot();
});

И я спарил файл, который я на самом деле тестирую, чтобы попытаться устранить любые возможные внешние проблемы с библиотекой 

import React from 'react';
import {
  View,
  Text
} from 'react-native';

export class Login extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello World</Text>
      </View>
    );
  }
}

export default Login;

Здесь нет разницы между именованным экспортом и экспортом по умолчанию, но обычно экспорт по умолчанию подключен к redux, поэтому я экспортирую именованный класс для тестирования.

1 Ответ

0 голосов
/ 24 января 2019

Зависимости, которые вы показываете, указывают на то, что вы используете Babel 6. В Babel 6 есть ошибка, которая вызывает проблему, которую вы описываете в своем вопросе. Сообщалось здесь и здесь .

Вам следует перейти на Babel 7.

Вкратце, проблема в том, что до исправления в Babel Бабел проводил статический анализ кода, видел, что super() не вызывался, и не выполнял код во время статического анализа. Тем не менее, правило состоит в том, что super() должен быть вызван перед доступом к this или возвращением this из конструктора. (Если конструктор не возвращает явно значение, он возвращает this.) Так как конструктор, который вы показываете, терпит неудачу, выдает, он не возвращает, и, следовательно, он не должен вызывать super().

...