使用enzyme测试React组件的className

Question

在使用enzyme(mount或shallow)测试一个使用className设置css类的react组件时，如果它是一个div，我能够正确地进行测试，但是无法在h1标签上运行。

这是由于：

• mount或shallow的问题吗？
• 我是否遗漏了一些东西？
• 还是有bug？

欢迎任何想法！

JSX:

import React from 'react'

export const PageNotFound = ({heading, content, wrapperCSS, headingCSS, contentCSS}) => (
<div className={ wrapperCSS }>
  <div className={ contentCSS }>
    { content }
  </div>
  <h1 className={ headingCSS }>{ heading }</h1>
</div>
)

PageNotFound.propTypes = {
    heading: React.PropTypes.string,
    content: React.PropTypes.string,
    wrapperCSS: React.PropTypes.string,
    headingCSS: React.PropTypes.string,
    contentCSS: React.PropTypes.string
};

PageNotFound.defaultProps = {
    heading: '404',
    content: 'Page Not Found',
    wrapperCSS: 'wrapper',
    headingCSS: 'heading',
    contentCSS: 'content'
};

export default PageNotFound

规格：

import React from 'react'
import { expect } from 'chai'
import { shallow, mount } from 'enzyme'

import PageNotFound from './PageNotFound'

describe('<PageNotFound/>', function() {

let wrapper;

beforeEach(() => {
    wrapper = mount(<PageNotFound contentCSS="mycontent" headingCSS="myheader" content="Message" heading="My Title" />);
})

it('Uses heading prop', () => {
    expect(wrapper.find('h1').text()).to.eq('My Title')
});

it('Uses headingCSS prop', () => {
    console.log(wrapper.html());
    expect(wrapper.find('h1.myheader').length).to.eq(1)
});

it('Uses content prop', () => {
    expect(wrapper.find('div.mycontent').text()).to.eq('Message')
});


});

测试结果：

注意调试日志显示具有class为myheader的h1，但测试失败，因为未找到h1.myheader元素。

<PageNotFound/>
    ✓ Uses heading prop
LOG LOG: '<div class="_2t--u"><h1 class="myheader">My Title</h1><div class="mycontent">Message</div></div>'
    ✗ Uses headingCSS prop
    expected 0 to equal 1
    [e-mail]:11:24087
    [e-mail]:14:52974
    [e-mail]:14:55858
    tests.webpack.js:15:17123
    tests.webpack.js:14:10442

    ✓ Uses content prop

- stujo

Answer 1

奇怪，它应该可以工作的。

无论如何，你可以尝试利用Enzyme的API。

对于这个特定的测试，.hasClass()应该能够完成任务，并且更清楚地表达了其意图：

expect(wrapper.find('h1').hasClass('myheader')).to.eq(true)

- Rem Lampa

---

谢谢，当我再次启动React时会尝试这个！ - stujo

Answer 2

这里的问题是你的导入语句 import styles from './styles.module.css' 实际上没有被加载。

很可能你在测试设置文件中有一些东西来模拟任何具有 css 扩展名的内容：

require.extensions['.css'] = function () {
  return null;
};

我声望不够，否则我就会在评论中解释这个问题。不幸的是，我还不知道如何实际导入这些样式，你可以从我的这个问题看出来：WebPack LESS imports when testing with Mocha

- Ryan27

---

谢谢，我不认为那是问题所在，我已经删除了样式引用，但问题仍然存在。 - stujo