className返回未定义的摩卡酶和反应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'); 
    }) 

}); 

测试

/* 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'); 
    }) 

测试助手

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

您正在检查该组件的prop而不是class的根节点的存在是被渲染通过这个组件。
显然你没有通过这个道具。
您可以设置该组件的根元素类，因此，你应该检查有这班在dom值，而不是属性（丙）嵌套元素className 你可以用这个语法例子做到这一点：

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