冗談テストでWebPACKのエイリアスを使用することができません - 不変違反：それが反応アプリが作成反応し使用してブートストラップされます<a href="https://github.com/davidRoussov/jest-webpack-alias" rel="nofollow noreferrer">https://github.com/davidRoussov/jest-webpack-alias</a></p> <p>：ターゲットコンテナはDOM要素

Question

ではありません、私はここで見つける、この問題を複製し、新しいレポを作成しました-app、しかしそれは排出されました。私はnpm run testを実行したとき、私は取得していますエラーは、このです：

FAIL src\components\Parent.test.js 
● Test suite failed to run 

Invariant Violation: Target container is not a DOM element. 

    at invariant (node_modules/fbjs/lib/invariant.js:42:15) 
    at Object.<anonymous> (src/index.js:7:20) 
    at Object.<anonymous> (src/components/Parent.js:2:14) 
    at Object.<anonymous> (src/components/Parent.test.js:2:15) 
    at process._tickCallback (internal/process/next_tick.js:103:7) 

コンポーネントがテストされ、Parent.js：

import React, { Component } from 'react'; 
import Child from '@/components/Child'; 

class Parent extends Component { 
    render() { 
    return (
     <div> 
     <Child/> 
     </div> 
    ); 
    } 
} 

export default Parent; 

テスト、Parent.test.js：

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

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

ウェブパックの設定では、私は追加したばかりです：

function resolve(dir) { 
    return path.join(__dirname, '..', dir) 
} 

そして：

alias: { 

    // Support React Native Web 
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 
    'react-native': 'react-native-web', 
    '@': resolve('src') 
}, 

冗談の設定：import Child from '@/components/Child';がimport Child from './Child';

Answer 1

に置き換えている場合冗談は、私はそれがあまりにも遅くはない願っていますエラーを生成しません

"jest": { 
    "collectCoverageFrom": [ 
     "src/**/*.{js,jsx}" 
    ], 
    "setupFiles": [ 
     "<rootDir>/config/polyfills.js" 
    ], 
    "testMatch": [ 
     "<rootDir>/src/**/__tests__/**/*.js?(x)", 
     "<rootDir>/src/**/?(*.)(spec|test).js?(x)" 
    ], 
    "testEnvironment": "node", 
    "testURL": "http://localhost", 
    "transform": { 
     "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest", 
     "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", 
     "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js" 
    }, 
    "transformIgnorePatterns": [ 
     "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$" 
    ], 
    "moduleDirectories": ["node_modules"], 
    "modulePaths": ["src"], 
    "moduleNameMapper": { 
     "^@(.*)$": "<rootDir>/src", 
     "^react-native$": "react-native-web" 
    }, 
    "moduleFileExtensions": [ 
     "web.js", 
     "js", 
     "json", 
     "web.jsx", 
     "jsx", 
     "node" 
    ] 
    }, 

、あなたは、キャプチャを代用するのを忘れ正規表現グループは次のようになります。

"moduleNameMapper": { 
    "^@(.*)$": "<rootDir>/src/$1", 
}, 

Link to the documentation