代码之家 › 专栏 › 技术社区 › Suneeth Lenin

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

css-modules jestjs enzyme reactjs javascript

Suneeth Lenin · 技术社区 · 7 年前

我在react项目中使用css模块,并使用web包进行捆绑。在使用Jest进行测试时,由于Jest将尝试像普通JS文件一样导入css文件,因此出现以下错误,

语法错误:意外标记。

我找到的解决方案是使用“identity obj proxy”来模拟scss/css文件。但现在我不能使用css选择器来测试组件。例如

测验

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
}

我正在使用 从“”导入样式/莫基。scss’; 导入样式并使用样式对象作为类名。在使用css模块之前,上面的测试通常是有效的。现在我的问题是,我将如何使用css选择器进行测试,以及需要做哪些更改才能使其正常工作?。谷歌搜索没有帮助

1 回复 | 直到 7 年前

Yangshun Tay 7 年前

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

您仍然可以通过以下几种方式进行测试:

1) 添加仅用于测试的静态类名:

<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插件,将所有 data-jest 在透明化过程中来自DOM的属性。

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

1 年前

Anaya Ammar · 渲染后未显示的值

1 年前

matin kahrizi · 当我的状态更改时,useSelector不更新

1 年前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Zemelon · -moz背面可见性不适用于顺风css

1 年前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

1 年前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

1 年前

Mark C. · 制作一个可松开的单选按钮[关闭]

1 年前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

1 年前