如何让 Enzyme 支持使用 styled-components 编写的 React 组件-JavaScript中文网-JavaScript教程资源分享门户

Enzyme 是 React 生态中的一个测试工具，而 styled-components 则是一个基于组件的 CSS-in-JS 库。由于它们都在实践中表现出色，因此使用它们来编写 React 应用程序是一个常见的选择。然而，尽管 styled-components 提供了一些内置的侦听器，但 Enzyme 并不支持默认情况下与它的集成。在本篇文章中，我们将学习如何让 Enzyme 支持它。

建立 TestHelpers

TestHelpers 是一种模式，可以通过自定义设置 Enzyme，使其支持与不支持的 library 集成。为了使用 styled-components，我们需要创建一个新的 TestHelper：

import { mount } from 'enzyme';
import { ThemeProvider } from 'styled-components';

export const mountWithTheme = (child, theme) => {
  return mount(<ThemeProvider theme={theme}>{child}</ThemeProvider>);
};

这个 TestHelper 在 mount Enzyme 方法上实现了一个 wrapper，并将主题（由 styled-components 提供）注入到它的顶层。从现在开始，我们将使用上面定义的这个函数来测试我们的组件。

局部样式

现在，我们需要考虑到 styled-components 在“shadow DOM”内渲染组件的方式。这意味着，如果你试图测试一个组件导出的局部样式，你将无法验证该组件导出的样式是否正确。为了解决这个问题，我们建议通过将样式从组件文件中移动到它们自己的“style”文件中，而不是将它们与组件混合在一起。

例如，将以下代码：

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
`;

export default Button;

转换为：

// components/Button.js
const Button = styled.button`
  color: ${props => props.primary ? 'white' : 'blue'};
`;

export default Button;

// styles/Button.js
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
`;

export default Button;

这种分离可以确保向所有组件注入的主题在测试组件样式时得到正确的匹配。

测试示例

现在，我们来看看一个例子，它是如何使用 styled-components 和 Enzyme 进行测试的。我们将使用 Jest 作为测试运行器。

-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ - -------------- - ---- --------------------
------ ------ ---- ------------

------------------ -- -- -
  ----------- ----------- -- -- -
    ----- ---- - ---------------------- ----

    -------------------------------
  ---

  ----------- ---- ------- -------- -- -- -
    ----- ---- - ---------------------- ------- ----

    -------------------------------
  ---
---

这个测试文件用于检查我们的 Button 组件是否正确地显示红色背景和白色前景，我们还检查了组件在插入 primary props 时是否正确显示蓝色背景和白色前景。

结论

在本篇文章中，我们学习了如何使用 styled-components 和 Enzyme 进行测试，尤其是我们的 TestHelper 和通过将局部样式从其他组件代码中分离。这将在正确注入主题并确保我们的测试仍然能够检测组件中的样式变化方面有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66f68907c5c563ced588c5cc