我应该如何为样式化组件编写 Jest 测试用例并监视 css 以验证样式是不是正确？

Posted 2023-03-15

【中文标题】我应该如何为样式化组件编写 Jest 测试用例并监视 css 以验证样式是不是正确？

【英文标题】：How should I write Jest Test cases for styled component and spy on css to verify if the styles?我应该如何为样式化组件编写 Jest 测试用例并监视 css 以验证样式是否正确？

【发布时间】：2020-11-26 10:43:04

【问题描述】：

我在 React-redux 中有一个组件，它有一个 PagedGrid 组件（基本上是一个按行呈现数据的表格）。

<UsersContainer>
  <Title>t('users')</Title>
  <PagedGrid
    data-auto-container="user:table"
    pageData=user.data
    columns=this.column
  />
</UsersContainer>

我为自定义样式组件创建了一个函数，该函数将 css 应用于 PagedGrid 内的表格行

const UsersContainer = styled.div`
  > table > tbody 
    $props => customcss(props);
  
`;

function customcss( data = [] ) 
  let styles = '';
  if (data.length > 0) 
    data.forEach((value, index) => 
      if (value.mycondition) 
        const rowStyle = `& > tr:nth-child($index + 1) 
          background-color: $LIGHT_BLUE
        `;
      
    );
  
  return css` $rowStyle `;

现在我想用 jest 创建一个测试用例来监视这个表的 css 并检查样式是否被应用。谁能帮我为此创建一个测试用例。

【问题讨论】：

可能是getComputedStyle。

@DrewReese 你有一些例子，或者我可以参考的任何博客链接，我找不到任何特定的示例代码来编写我的测试用例

这种取决于所使用的测试渲染框架（酶、react-testing-library 等），即被测组件被渲染成什么，但要点是你查询被测元素的 that html 元素/包装器并获取计算的样式对象并简单地对值进行断言。我没有任何具体的例子，也不知道任何博客/教程。 TBH 单独对 your customcss 函数进行单元测试可能会更容易（这就是单元测试 actually 无论如何）。您要做的是测试第 3 方代码。

顺便说一句，您的 customcss 函数中似乎存在错误。如果 value.myCondition 是 never 真实的，则不会声明 rowStyle。也许您打算更新并返回styles。

谢谢@DrewReese 我昨天在处理它时发现了那个错误，我将尝试设置测试代码和值断言，我想的一种方法是首先获取组件的包装器使用 shallow 然后获取嵌套的 PagedGrid 或 UserContainer，然后找出样式是什么。

【参考方案1】：

假设您使用 @testing-library/react 库，您可以通过直接从 html 文档中获取组件的样式来测试组件的样式，并准确查看特定元素使用的样式。

在您的示例中，您可以执行以下操作（假设 $LIGHT_BLUE 值为 blue）：

import React from 'react';
import  render  from '@testing-library/react';
import UsersContainer from '../UsersContainer';

it('should have the background color set to blue', () => 
  const  container, getAllByTestId  = render(
    <UsersContainer />
  );

  // Replace <YOUR_CSS_SELECTOR> by your component's css selector (that can be found in the inspector panel)
  let contentDiv = document.querySelector('<YOUR_CSS_SELECTOR>');
  let style = window.getComputedStyle(contentDiv[0]);
  expect(style.color).toBe('blue');

在这里，为了获取元素的样式，我使用了元素的CSS Selector。但是，它也可以直接使用元素的className 或id（如果有的话），分别使用方法document.getElementByClassName('YOUR_DIV_CLASS_NAME')、document.getElementId('YOUR_DIV_ID') 而不是document.querySelector('')。请注意，此处的给定名称应该是唯一的，可以使用 id 技术，也可以使用 className。