如何在使用 css 模块时在 jest 单元测试中使用 css 选择器

Question

我在我的 React 项目中使用 css 模块并使用 web pack 进行捆绑。在使用 Jest 进行测试时，因为 jest 会尝试像普通 JS 文件一样导入 css 文件，出现以下错误，

SyntaxError: Unexpected token .

我找到的解决方案是使用 "identity-obj-proxy" 模拟 scss/css files.But 现在我不能使用 css 选择器来测试 components.For 示例

测试

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

渲染方法

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
}

我正在使用 import style from './mocky.scss'; 导入样式并将样式对象用于 class 名称。在使用 css-modules 之前，上面的测试用于 work.Now 我的问题是我如何能够使用 css 选择器进行测试以及需要做哪些改变才能使它工作？谷歌搜索没有帮助

Answer 1

我认为目前还没有解决这个问题的好方法。

您仍然可以通过几种方式对其进行测试：

1) 添加静态 class 名称仅用于测试：

<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) 使用数据属性定位该元素。

组件

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

渲染

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

这两种方法都有效，但它们包括向 DOM 添加内容，然后将其交付生产，这意味着将更多字节发送给您的用户。

如果您使用第二种方法，您可以考虑编写一个 Babel 插件，在转译过程中从 DOM 中删除所有 data-jest 属性。

如何在使用 css 模块时在 jest 单元测试中使用 css 选择器

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

javascript

reactjs

enzyme

jestjs

css-modules

测试

渲染方法