Как протестировать компонент, который построен со стилевым компонентом - PullRequest
Новая
       19

Как протестировать компонент, который построен со стилевым компонентом

1 голос
/ 24 апреля 2020

Я новичок в тестировании 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.

AppLayout вызывается в приложении. js

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

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

export default App;
...