如何测试使用样式组件构建的组件答案

【问题标题】：How to test a component which is built with styled component如何测试使用样式组件构建的组件
【发布时间】：2020-08-08 04:54:21
【问题描述】：

我是 React 测试和 Jest 和 Enzyme 的新手。我正在尝试首先学习如何使用 TDD 方法，因此，我在开始编码之前构建我的测试。我所做的是在 React 中创建一个示例应用程序并安装了 Enzyme 依赖项，然后我编写了测试：

import { shallow } from "enzyme";
import React from "react";
import AppLayout from "./AppLayout";
import { ContentLayout } from "./styles";

it("renders <AppLayout /> component", () => {
  const wrapper = shallow(<AppLayout />);
  expect(wrapper.find(ContentLayout)).to.have.lengthOf(1);
});

然后我构建了一个组件，其中包含一个名为 ContentLayout 的样式化组件

import React from "react";
import { ContentLayout } from "./styles";

const AppLayout = () => {
    return (
        <>
            <ContentLayout>
                <h1>HELLO</h1>
            </ContentLayout>
        </>
    );
};

export default AppLayout;

我无法通过测试，因为我得到的是下一个错误：

TypeError: Cannot read property 'have' of undefined

我想了解当我从头开始一个项目并考虑到 TDD 时，应该如何测试这种组件以及一般应遵循哪些规则。

然后在 App.js 中调用 AppLayout

import React from "react";
import AppLayout from "./Components/AppLayout";

function App() {
    return <AppLayout />;
}

export default App;

【问题讨论】：

您阅读过 Jest 文档吗？ .to 不是他们期望的 API 的一部分：jestjs.io/docs/en/expect，你可能会想到 Chai 的 chaijs.com。
我也在关注这个答案stackoverflow.com/a/56373421/7882685 是的，那不存在我正在尝试使用 tohavelenght(number)

标签： reactjs jestjs tdd enzyme

【解决方案1】：

您应该在 jestjs 中使用 expect 的 .toHaveLength(number) 匹配器。

expect(wrapper.find(ContentLayout)).toHaveLength(1);

对于嵌套组件，一般有两种策略：

Shallow Rendering API

浅渲染有助于约束自己将组件作为一个单元进行测试，并确保您的测试不会间接断言子组件的行为。

这意味着我们不想渲染嵌套组件（ContentLayout），我们只测试父组件（AppLayout）的行为（生命周期方法、事件处理程序、数据获取、条件渲染等） )。

Full Rendering API (mount(...))

完整的 DOM 渲染非常适合您的组件可能与 DOM API 交互或需要测试封装在更高阶组件中的组件的用例。

【讨论】：