className이 Mocha Enzyme 및 React CSS 모듈을 사용하여 정의되지 않은 값을 반환합니다.

Question

나는 여러 번 시도했지만 성취하려고 시도한 것이 있다고 생각합니다.

요소 하나에 특정 클래스가 있는지 테스트하고 싶습니다.

스플래시

import React from 'react'; 
import { NavLink } from 'react-router-dom' 
import Logo from '../shared/logo/index'; 
import * as styles from './style.css'; 

class Splash extends React.Component { 
    render(){ 
    return (
     <div className={styles.indexAppContent}> 
     <NavLink to="/home" className={styles.index}> 
      <Logo /> 
     </NavLink> 
     </div> 
    ); 
    } 
} 

export default Splash; 

있는 style.css

.index { 
    div { 
    color: #FFF; 
    //font-size: 8rem; 
    } 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    display: block; 
    transform: translate3d(-50%, -50%, 0); 
    -webkit-transform: translate3d(-50%, -50%,0); 
    -moz-transform: translate3d(-50%, -50%,0); 
    -ms-transform: translate3d(-50%, -50%,0); 
} 

.indexAppContent { 
    height: 100vh; 
    width: 100vw; 
    position: relative; 
} 

그러나 이것은 출력 :

{ className: undefined, 
    children: 
    { '$$typeof': Symbol(react.element), 
    type: { [Function: NavLink] propTypes: [Object], defaultProps: [Object] }, 
    key: null, 
    ref: null, 
    props: 
     { to: '/home', 
     className: undefined, 
     children: [Object], 
     activeClassName: 'active', 
     ariaCurrent: 'true' }, 
    _owner: null, 
    _store: {} } } 

스플래쉬

/* eslint-disable object-property-newline */ 
import React from 'react'; 
import ReactTestUtils from 'react-dom/test-utils' 
import { expect } from 'chai'; 
import { NavLink } from 'react-router-dom' 
import { shallow } from 'enzyme'; 

//Splash 
import Splash from '../../../src/components/Splash'; 
import * as styles from '../../../src/components/Splash/style.css'; 

//logo 
import Logo from '../../../src/components/shared/logo'; 


describe('<Splash />',() => { 

    const wrapperSplash = shallow(<Splash/>); 
    const wrapperNavLink = shallow(<NavLink />); 
    const wrapperLogo = shallow(<Logo />); 

    it('must be defined',() => { 
    expect(wrapperSplash).to.be.defined; 
    }); 

    it('should have one logo',() => { 
    expect(wrapperSplash.find(Logo)).to.have.length(1); 
    }) 

    it('should have className',() => { 
    expect(wrapperSplash.first().prop('className')) 
     .to.contain('indexAppContent'); 
    }) 

    it('Logo links to Home',() => { 
    expect(wrapperSplash.find(NavLink).first().props().to) 
     .equals('/Home'); 
    }) 

}); 

당신은 해당 구성 요소의 prop하지 렌더링 된 루트 노드에서 class의 존재를 확인하는

import path from 'path'; 
import csshook from 'css-modules-require-hook/preset' // import hook before routes 
import routes from '/shared/views/routes' 
import requireHacker from 'require-hacker'; 
import sass from 'node-sass'; 
import {jsdom} from 'jsdom'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 

injectTapEventPlugin(); 

hook({ 
    extensions: ['.css'], 
    generateScopedName: '[local]', 
    preprocessCss: (data, filename) => 
    sass.renderSync({ 
     data, 
     file: filename, 
     importer: (url) => { 
     if (url.indexOf('~') === 0) { 
      const node_modules_path = path.resolve(__dirname, '../..', 'node_modules'); 

      return { 
      file: path.join(node_modules_path, url.replace('~', '')) 
      }; 
     } 

     return {file: url}; 
     } 
    }).css 
}); 

const fakeComponentString = ` 
    module.exports = require('react').createClass({ 
    render() { 
     return null; 
    } 
    }); 
`; 

requireHacker.hook('svg',() => fakeComponentString); 

// jsdom 
const exposedProperties = ['window', 'navigator', 'document']; 


global.document = jsdom(''); 
global.window = document.defaultView; 
Object.keys(document.defaultView).forEach((property) => { 
    if (typeof global[property] === 'undefined') { 
    global[property] = document.defaultView[property]; 
    } 
}); 

global.navigator = { 
    userAgent: 'node.js' 
}; 

Answer 1

테스트

/* eslint-disable object-property-newline */ 
import React from 'react'; 
import ReactTestUtils from 'react-dom/test-utils' 
import { expect } from 'chai'; 
import { NavLink } from 'react-router-dom' 
import { shallow } from 'enzyme'; 

    it('should have className',() => { 
    console.info(wrapperSplash.first().props()); 
    expect(wrapperSplash.first().prop('className')) 
     .to.contain('indexAppContent'); 
    }) 

테스트 도우미 이 구성 요소에 의해.
분명히 당신은이 소품을 지나치지 않고 있습니다.
당신은 그래서 당신이 클래스에게 dom에서 값를 개최하지 않는 속성 (소품) 중첩 된 요소 className 당신은 예를 들어,이 구문으로 작업을 수행 할 수 있습니다 확인해야합니다,이 구성 요소의 루트 요소에 클래스를 설정 :

it('should have class of indexAppContent',() => { 
    expect(wrapperSplash.find('.indexAppContent')).to.have.length(1); 
    })