Как протестировать стилизованный компонент с помощью шутки

Question

у меня есть приложение для реагирования, я разделяю свой код по компонентам и контейнерам, в контейнере Auth у меня есть индекс. js в индексе. js я импортирую свой InputComponent, созданный с помощью стилизованного компонента. Каков наилучший способ протестировать этот компонент, поскольку в будущем у меня будут другие компоненты, такие как кнопка Erorr и et c.

Я уже пытаюсь протестировать его отдельно, создайте input.test. js при импорте моего InputComponent, и он выполняет свою работу, я не могу смоделировать на нем изменения.

Может быть, мне стоит протестировать контейнер, а не компоненты?

Мне действительно нужны примеры того, как чтобы сделать это хорошо!

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import styled from 'styled-components';
import InputComponent from '../../components/InputComponent';

  return (
    <AuthBlock>
      <LogoComponent />
      <ErrorComponent submitted={submitted} value={error} />
      <Form onSubmit={(e) => { submitForm(e); }}>
        <InputComponent
          validation={submitted}
          className="input-form"
          inputType="text"
          name="name"
          placeholder="Логин"
          controlFunc={(e) => { setLogin(e.target.value); }}
          value={login}
        />
        <InputComponent
          validation={submitted}
          className="input-form"
          inputType="password"
          name="password"
          placeholder="Пароль"
          controlFunc={(e) => { setPassword(e.target.value); }}
          value={password}
        />
        <ButtonComponent
          className="btn"
          type="submit"
          name="submit"
          value="Войти"
        />
      </Form>
    </AuthBlock>
  );

Это inputComponent.jsx

const Input = styled.input`
  width: 300px;
  height: 45px;
  border: 1px solid #EBEFF3;
  border-radius: 5px;
  padding-left: 30px;
  /* box-shadow: 0px 0px 5px rgba(191, 210, 226, 0.25); */
  font-size: 16px;
  outline: none;
  &::placeholder {
    color: #9FA9AD;
  }

  return (
    <FormGroup>
      <Input
        style={{ border: (validation && !value) && '1px solid #FF767E' }}
        className={className}
        name={name}
        type={inputType}
        value={value}
        onChange={controlFunc}
        placeholder={placeholder}
        onClick={clickFunc}
      />
    </FormGroup>
  );