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 ponents.For example

Test

it('renders 2 children', () => {
  expect(ponent.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

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 ponents.For example

Test

it('renders 2 children', () => {
  expect(ponent.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

• javascript
• reactjs
• enzyme
• jestjs
• css-modules

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

1 Answer 1

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(ponent.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.