Jest / React Testing Library - Как лучше всего проверить ребенка на ребенка? - PullRequest
Новая
       36

Jest / React Testing Library - Как лучше всего проверить ребенка на ребенка?

1 голос
/ 24 сентября 2019

Итак, я сейчас нахожусь в процессе изучения того, как проводить модульное тестирование моих компонентов и что у меня работает, но я не чувствую, что это «правильный» способ сделать это.

Впоследние два теста я ищу первого ребенка от первого ребенка.Это выглядит немного грязно, но я изо всех сил пытаюсь найти лучший способ достичь этого.

По сути, я должен был проверить, присутствует ли svg в этом сценарии - и если нет, то в следующем тесте, если текст присутствует.

Любая помощь будет отличной!

Спасибо

Мой компонентный выход: 

<h1>
  <svg...> <!--(if hasIcon prop is set to true)-->
  My Header Text
</h1>

Мои текущие тесты: 

let wrapper;

beforeEach(() => {
    wrapper = render(<MyComponent />);
});


describe("<MyComponent />", () => {
    it("should render", () => {
        const { container } = wrapper;
        expect(container.firstChild);
    });

    it("should match snapshot", () => {
        const { container } = wrapper;
        expect(container.firstChild).toMatchSnapshot();
    });

    it("should render with an icon", () => {
        const { container } = wrapper;
        expect(container.firstChild.firstChild.nodeName).toBe("svg");
    });

    it("should render without an icon", () => {
        const { container } = render(<AppHeader hasIcon={false} />);
        expect(container.firstChild.firstChild.nodeName).toBe("#text");
    });
});

1 Ответ

1 голос
/ 24 сентября 2019

Исходя из моего комментария выше, вот подход, который вы можете использовать, поскольку ваша основная задача вращается вокруг container.firstChild.firstChild.nodeName

const Text = () => <p data-testid="text">Some text</p>;
const SVG = () => <svg data-testid="svg>Some svg</svg>;

const MyComponent = ({ text = false, svg = false }) => (
    <div>
        {text && <Text/>}
        {svg && <SVG/>}
    </div>
);

describe("<MyComponent />", () => {
    it("should render", () => {
        const { container } = render(<MyComponent />);
        expect(container.firstChild).toBeTruthy();
    });

    it("should not render text or svg", () => {
        const { queryByTestId } = render(<MyComponent />);
        expect(queryByTestId('svg')).toBeFalsy();
        expect(queryByTestId('text')).toBeFalsy();
    });

    it("should render with a text element", () => {
        const { queryByTestId } = render(<MyComponent text={true} />);;
        expect(queryByTestId('text')).toBeTruthy();
    });

    it("should render with a svg element", () => {
        const { queryByTestId } = render(<MyComponent svg={true} />);
        expect(queryByTestId('svg')).toBeTruthy();
    });
});
...