test multiple classname using enzyme

Question

I want to test if the className ".button_next accent" is existing or not.

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

my test

  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();
    
  }); 

Answer 1

There are no spaces between multiple CSS classes selector.

E.g.

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();
  });
});

test result:

 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