如何有条件地测试样式化的组件和子元素？

Posted 2023-03-16

【中文标题】如何有条件地测试样式化的组件和子元素？

【英文标题】：How to test styled components conditionally and children elements?

【发布时间】：2019-10-13 10:32:34

【问题描述】：

我是单元测试的新手，我在文档、文章和 YT 视频上花了大约 20-30 个小时，但仍然不知道如何实现这一点。基本上我想在这里测试 3 件事：

确保此组件呈现 3 个组件 测试条件样式 测试点击事件

到目前为止，对于第一件事，如果我尝试这样做：

import  shallow  from "enzyme";
import React from "react";
import ButtonsComponent,  SchedButton  from "./ButtonsComponent";

it("renders three <MyButton /> components", () => 
  const wrapper = shallow(<ButtonsComponent />);
  expect(wrapper.find(MyButton)).to.have.lengthOf(3);
);

我收到以下错误： TypeError: Enzyme::Selector 需要一个字符串、对象或组件构造函数

而且我不知道如何测试其他两件事，我看过一些示例，但我不明白如何使它们适应我的特定情况，因为它们似乎并没有完全测试我正在尝试做的事情。

这是我的组件的简化版本：

import React from "react";
import styled from "styled-components";

const MyButton = styled.button`
  background: $props =>
    props.color ? theme.palette.secondary.dark : "#e6e6e6";
  color: $props => (props.color ? "white" : "#737373");
`;

const ButtonsComponent = ( currentState, updateState ) => 
  const handleClick = event => 
    updateState(event.target.value);
  ;

  return (
    <div>
      <MyButton
        value="Button 1"
        onClick=handleClick
        color=currentState === "Button 1" ? "#1fbd45" : ""
      >
        Button 1
      </MyButton>
      <MyButton
        value="Button 2"
        onClick=handleClick
        color=currentState === "Button 2" ? "#1fbd45" : ""
      >
        Button 2
      </MyButton>

      <MyButton
        value="Button 3"
        onClick=handleClick
        color=!currentState || currentState === "Button 3" ? "#1fbd45" : ""
      >
        Button 3
      </MyButton>
    </div>
  );
;

export default ButtonsComponent;

非常感谢任何帮助，ELI5 解释会更多！

【参考方案1】：

我会尽可能详细地回答您的问题。

所以你有 3 个问题：

1.确保这个组件渲染了 3 个组件

您的测试几乎是正确的。错误是你在做： wrapper.find(MyButton) 而不是 wrapper.find('MyButton')。 要执行wrapper.find(MyButton)，您需要先导入 MyButton 组件，这样应该可以：

import  shallow  from "enzyme";
import React from "react";
import ButtonsComponent,  MyButton  from "./ButtonsComponent";

it("renders three <MyButton /> components", () => 
  const wrapper = shallow(<ButtonsComponent />);
  expect(wrapper.find(MyButton)).to.have.lengthOf(3);
);

但您不能在代码中执行此操作，因为您没有导出 MyButton 组件。 我对这个问题的建议是为 MyButton 组件创建一个文件，为 ButtonsComponent 组件创建另一个文件。一般来说，每个文件有一个组件会更加清晰，单元测试也变得更加清晰。 然后你就可以做这样的事情了：

import  shallow  from "enzyme";
import React from "react";
import ButtonsComponent from "./ButtonsComponent";
import MyButton from "./MyButton"

it("renders three <MyButton /> components", () => 
  const wrapper = shallow(<ButtonsComponent />);
  expect(wrapper.find(MyButton)).to.have.lengthOf(3);
);

2.测试条件样式

我不知道您使用的是什么测试引擎（mocha、jest 等），但如果我必须选择一个来测试 React 应用程序，我会选择 Jest（不过这只是个人喜好问题）。 我建议 jest，因为它拥有你需要的一切，比如间谍、匹配器等，而且还有一些额外的包可以让你的生活更轻松，就像在这种情况下一样。

因此，要使用 jest 测试样式组件，您将需要两个额外的包 react-test-renderer（基本上将 React 组件转换为 js 对象）和 jest-styled-components（这将为您提供一个名为 toHaveStyleRule 的额外匹配器，这将有所帮助你的目标很重要）。

安装这两个包后，你要做的是，首先导入它们：

import renderer from "react-test-renderer";
import "jest-styled-components";

然后你将你的组件转换为一个 js 对象：

const tree =
  renderer
  .create(<MyButton color="red">Test</MyButton>)
  .toJSON();

最后，您将询问您期望应用的样式以及为组件指定的属性：

expect(tree).toHaveStyleRule("background-color", "red");

3.测试点击事件

要测试点击事件，您需要一个间谍。如果您使用的是 jest，那么您已经拥有此功能，如果您使用的是 mocha，我认为您可能需要一个额外的包，如 sinon 或类似的。

spy 将让您跟踪 updateState 函数发生的情况，因此当您测试点击事件时，您将传递一个 spy 函数作为 updateState 属性的值。这样，当您模拟单击按钮时，您的间谍将被调用，然后您将能够向它提出问题，例如“您被呼叫了吗？”，因此您将能够在单击事件时检查您使用预期的参数调用 updateState 函数。

在this link 中，您会发现您的示例（进行了一些小的修改）正在运行，并且对您想要检查的所有内容进行了测试（不要注意依赖项出现在 package.json 文件中的位置，很多其中应该显示为开发依赖项，但由于某种原因，如果我这样做它不起作用，这可能是我在该工具中做错了）。

希望这个回答对你有帮助。

【讨论】：

非常感谢您的详细解答。它实际上有很大帮助。是的，忘了说我在用 Jest。