Jest + Enzyme + React мелкая проблема тестирования - PullRequest
Новая
       8

Jest + Enzyme + React мелкая проблема тестирования

0 голосов
/ 06 сентября 2018

Я пытаюсь протестировать свое приложение React, используя Jest для тестового бегуна и enzyme для утилиты тестирования (простой поверхностный рендеринг для начинающих). Даже без какого-либо теста простой импорт компонента в тестовый файл приводит к ошибке в основном файле index.js (который импортирует только компонент <App/> и выводит его в DOM), указывая на функцию ReactDOM.render() с сообщением об ошибке. Invariant Violation: Target container is not a DOM element.. Я пытался смоделировать DOM с библиотекой jsdom (как локально в тестовом файле, так и в mock-файле, переданном в Jest через setupFiles prop), но мое повторное назначение global.document, похоже, игнорируется.

Вот мой browserMock.js файл: 

import jsdom from 'jsdom';

const { JSDOM } = jsdom;

const dom = new JSDOM('<!DOCTYPE html><html><head></head><body><div id="app"></div></body></html>');
const { window, window: { document } } = dom;
global.window = window;
global.document = document;

Поэтому, когда я печатаю значения document и global.document - это совершенно разные объекты. global.document.getElementById('app') возвращает null, а document.getElementById('app') возвращает желаемое div.

Вот также мой package.json (он содержит конфигурацию Jest): 

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watchAll",
    "start": "parcel index.html -p 3000 --open",
    "build": "parcel build src/index.js"
  },
  "author": "malyfko",
  "license": "MIT",
  "dependencies": {
    "autoprefixer": "^9.1.0",
    "classnames": "^2.2.6",
    "postcss-modules": "^1.3.2",
    "prop-types": "^15.6.2",
    "query-string": "^6.1.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-infinite-scroller": "^1.2.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.5",
    "redux-observable": "^1.0.0",
    "reselect": "^3.0.1",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-app": "^3.1.2",
    "babel-preset-stage-0": "^6.24.1",
    "enzyme": "^3.6.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "^2.50.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.10.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^23.5.0",
    "jsdom": "^12.0.0",
    "node-sass": "^4.9.3",
    "parcel-bundler": "^1.9.7"
  },
  "jest": {
    "testRegex": "((\\.|/)(test))\\.js$",
    "moduleFileExtensions": [
      "jsx",
      "js"
    ],
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "rootDir": "src",
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|scss)$": "identity-obj-proxy"
    },
    "setupFiles": [
      "<rootDir>/__mocks__/browserMock.js"
    ]
  }
}

Мой index.js файл (на всякий случай): 

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from 'components/App';

import 'styles/main.scss';

ReactDOM.render(
  (<App />),
  document.getElementById('app'),
);

И мой тестовый файл: 

import React from 'react';
import { shallow } from 'enzyme';
import { MyComponent } from 'components/MyComponent';

describe('MyComponent testing', () => {
  test('', () => {});
});

Я сомневаюсь, что это имеет какое-то значение, но в случае, если это так - я также использую parcel для компоновщика (хотя он все еще использует babel для компиляции)

Подобные вопросы по SO не сильно помогли.

...