使用酶测试多个类名

如何解决使用酶测试多个类名

我想测试 className“.button_next 重音”是否存在。

          <Button
            className={`${this.props.nextAccent && "accent"} button_next`}
            text={this.props.textNext}
            icon={"iconnext"}
            onClick={this.props.nextButtonClicked}
          />

我的测试

  Then(/^Next button contains accent/,function () {
    const wrapper = enzyme.mount(App);
    let nextButton = wrapper.find('.button_next').exists(); //here i want to check both 
                                                              .button_next and accent
    return (expect(nextButton).to.be.equal(true));
    //gave this a try 
    // Failed: let nextButton = wrapper.find('.button_next .accent').exists();
    // Failed: let nextButton = wrapper.find('button_next accent').exists();
    // Failed: let nextButton = wrapper.find('.button_next accent').exists();
    
  }); 

解决方法

多个 CSS 类选择器之间没有空格。

例如

index.jsx：

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <button className={`${this.props.nextAccent && 'accent'} button_next`}></button>
      </div>
    );
  }
}

index.test.jsx：

import { mount } from 'enzyme';
import React from 'react';
import App from './';

describe('68381268',() => {
  test('should pass',() => {
    const wrapper = mount(<App nextAccent />);
    let nextButton = wrapper.find('.button_next.accent').exists();
    expect(nextButton).toBeTruthy();
  });
});

测试结果：

 PASS  examples/68381268/index.test.jsx (8.76 s)
  68381268
    ✓ should pass (34 ms)

Test Suites: 1 passed,1 total
Tests:       1 passed,1 total
Snapshots:   0 total
Time:        9.734 s,estimated 10 s