使用酶测试多个类名

Posted 2023-03-16

【中文标题】使用酶测试多个类名

【英文标题】：test multiple classname using enzyme

【发布时间】：2021-09-23 14:54:35

【问题描述】：

我想测试类名“.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();
    
  ); 

【问题讨论】：

我想你可以试试enzyme.mount(<App />);。此enzymejs.github.io/enzyme

的文档

【参考方案1】：

多个 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

【讨论】：

完美！工作正常..是的，我怎么忘记css之间没有空格：|