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中包含此类值的嵌套元素，而不是属性（prop）className 您可以使用以下语法执行此操作，例如：

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

className使用Mocha Enzyme＆amp; amp;返回undefined。反应CSS模块

1 个答案: