Реактивная библиотека тестирования, модульные тесты компонентов

Question

Я пытаюсь создать тестовый модуль для моего простого приложения React с использованием библиотеки тестирования React. Я перечитал все документы и застрял в нем.

API был создан приложением create React. Одной из особенностей является то, что пользователь может менять тему. Есть setTheme hook, который собирается менять тему «темный» и «светлый».

Приложение. js

const App = () => { 
const [theme, setTheme] = useState('dark'); 
return ( <div>
           <Header theme={theme} setTheme={setTheme} />
        </div>)
};

Заголовок. js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const Header = props => {
  return (
    <header data-testid="header">
      <h1><span className="highlight">Github Users</span></h1>
      {props.theme === "dark" ? 
        <FontAwesomeIcon data-testid="button" icon="sun" size="2x" color="#dcba31"  onClick={ () => props.setTheme('light') }/>
        :  <FontAwesomeIcon icon="moon" size="2x" color="#1c132d" onClick={ () => props.setTheme('dark') }/>}
    </header>
  );
}
export default Header;

В компоненте Header я добавил функцию стрелки, которая меняет цвет темы.

Теперь я пытаюсь написать тест, который будет проверять компонент заголовка. Ожидаемый результат заключается в том, что после первого рендера компонент Header должен отобразить значок "солнце". После того, как пользователь нажмет на него, в заголовке появится значок «Луна»

Есть кое-что, что я пытаюсь, но это не работает, как я упоминал.

Header.test. js

import React from 'react';
import { render, cleanup } from "@testing-library/react"
import '@testing-library/jest-dom/extend-expect';
import { act } from "react-dom/test-utils";


import Header from '../components/Header';

afterEach(cleanup);

describe("Header Component", () => { 
    it("first render should return a sun icon", () => {
        const {getByTestId } = render(<Header />)
        expect(getByTestId("header"). // What method uses here? To check if it is icon sun or moon ? )

    })
    it("after mouse click event should return a moon icon", () => {
        const button = document.querySelector("svg"); // it is correct way to add a svg element as a button ?
        act( () => {
            button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
        })
        expect(getByTestId("header").  // again what to write here to test it after click ?
    })
})

Я уверен, что есть какой-то другой способ проверить сначала рендер, а затем после того, как щелкнуть какой компонент рендеринга заголовка. Я думаю, что проблема в том, что есть еще один компонент, который отображается условно. Если это текст, проблем нет, но после рендера появляется элемент svg с некоторыми атрибутами, такими как icon = "sun" / icon = "moon".

Live версия проекта

Github Repo Link

Вопросы :

1. Как правильно проверить этот компонент заголовка?
2. Как пройти тест в тесте, например. Я хочу использовать этот метод setTheme в тесте, как это сделать?

Answer 1

Есть много способов сделать это, и я могу рекомендовать статьи здесь https://kentcdodds.com/blog/?q=test, чтобы вы начали. Что касается вашей текущей настройки, я бы изменил некоторые вещи, которые я считаю полезными при написании юнит-тестов:

• Используйте data-testid для поиска элементов, например, "первый рендер должен вернуть значок солнца " может быть подтверждено expect(getByTestId('svg-sun')).toBeDefined(), который мне нравится
• Структурируйте ваши it как утверждения-заглушки-рендеринга и проверяйте только одну вещь в каждом тесте, например, в ваш второй it вам не хватает части рендеринга теста

Что касается вашего вопроса о прохождении реквизита, вы можете передать его как render(<Header theme={theme} setTheme={setThemeStub}/>), где const setThemeStub = jest.fn(). Это позволяет вам делать утверждения как expect(setThemeStub).toBeCalledWith(...)