How to Use css selectors in jest unit testing while using css modules

Question

I'm using css modules in my react project and using web pack for bundling. While using Jest for testing, as the jest will try to import css files like normal JS files got the below error,

SyntaxError: Unexpected token .

The solution that I found is to use "identity-obj-proxy" to mock scss/css files.But now I cannot use css selectors to test components.For example

Test

it('renders 2 children', () => {
  expect(component.find('.mockyApp').children().length).toBe(2);
});

render method

render() {
  if (this.state.host) {
    return (
      <div className={style.mockyApp}>
        <div className={style.sidePage}>
          <SideBar clickHandler={this.setPage} selected={this.state.page}/>
        </div>
        <div className={style.mainPage}>
          {this.renderComponent()}
        </div>
     </div>
  );
 }
// ... .. rest of render method
}

I'm using import style from './mocky.scss'; to import styles and using the style object for class names. Before using css-modules the above test used to work.Now my question is how will I be able to test using css selectors and what change needs to be done to make this work?. Googling didn't help

Is that 100% sure your render method? Because you are missing a bracket — sebastianf182
– sebastianf182, Commented Jan 19, 2018 at 20:05
of course not. It was a copy and paste mistake. Corrected it. Thanks — Suneeth Lenin
– Suneeth Lenin, Commented Jan 21, 2018 at 4:58

Yangshun Tay · Accepted Answer · 2018-01-14 18:28:45Z

I don't think there exists a good solution for this problem yet.

Few ways you can still test it:

1) Add a static class name just for testing:

<div className={`${style.mockyApp} mockyApp`}>
  <div className={style.sidePage}>
    <SideBar clickHandler={this.setPage} selected={this.state.page}/>
  </div>
  <div className={style.mainPage}>
    {this.renderComponent()}
  </div>
</div>

2) Use a data attribute to target that element.

Component

<div className={`${style.mockyApp} mockyApp`} data-jest="mockyApp">
  <div className={style.sidePage}>
    <SideBar clickHandler={this.setPage} selected={this.state.page}/>
  </div>
  <div className={style.mainPage}>
    {this.renderComponent()}
  </div>
</div>

Render

it('renders 2 children', () => {
  expect(component.find('[data-jest=mockyApp]').children().length).toBe(2);
});

Both ways work but they include adding stuff to the DOM which gets shipped to production, which means more bytes being sent to your users.

If you are going with the second approach, you can consider writing a Babel plugin that strips out all data-jest attributes from the DOM in the transpilation process.

Collectives™ on Stack Overflow

How to Use css selectors in jest unit testing while using css modules

Test

render method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Test

render method

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related