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

我是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;
评论