수 없습니다 - 불변 위반 : 대상 컨테이너 내가 여기이 문제를 복제하는 새로운 REPO를 생성 한 DOM 요소

Question

되지 않습니다 : https://github.com/davidRoussov/jest-webpack-alias

그것의 반작용 앱 반응 만들 사용하여 부트 스트랩 -app,하지만 그것은 배출되었습니다. , Parent.test.js

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

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

export default Parent; 

테스트 :

구성 요소가 테스트되고

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 : 나는 npm run test를 실행할 때 내가 갖는이 오류는 이것이다

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(); 
}); 

webpack 설정에서 나는 단지 다음을 추가했습니다 :

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