# component-test-helper

> The Component Test Helper is a package intended to make React Jest testing far more declaritive

Latest version **1.0.63** (published 2024-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install component-test-helper
pnpm add component-test-helper
yarn add component-test-helper
bun add component-test-helper
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.63 |
| Published | 2024-02-13 |
| First published | 2022-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 27.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Triston Armstrong |
| Maintainers | tarmstrong95 |
| Keywords | component, test, helper |

## Links

- npm: https://www.npmjs.com/package/component-test-helper
- Repository: https://github.com/Tarmstrong95/component-test-helper
- Homepage: https://tarmstrong95.github.io/component-test-helper/
- Issues: https://github.com/Tarmstrong95/component-test-helper/issues
- npm.io page: https://npm.io/package/component-test-helper

## Dependencies (3)

- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.3.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^14.2.1

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads

## Recent versions

- 1.0.63 (latest) — 2024-02-13
- 1.0.62 — 2022-12-12
- 1.0.61 — 2022-12-12
- 1.0.60 — 2022-12-12
- 1.0.59 — 2022-12-12
- 1.0.58 — 2022-12-12
- 1.0.57 — 2022-12-11
- 1.0.56 — 2022-12-11
- 1.0.55 — 2022-12-11
- 1.0.54 — 2022-11-28
- 1.0.53 — 2022-11-28
- 1.0.6 — 2022-11-28
- 1.0.5 — 2022-11-28
- 1.0.4 — 2022-11-28
- 1.0.3 — 2022-11-28
- … 3 more at https://npm.io/package/component-test-helper/versions

## README

> [!IMPORTANT]
> This is technically not my code. Im just maintaining it
> 
> Original Author: https://ryanclements.dev

# Component-Test-Helper

The Component Test Helper is a package intended to make React Jest testing far more declaritive

### Badges

[![npm version](https://img.shields.io/npm/v/npm.svg)](https://npm.im/npm)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Release](https://github.com/Tarmstrong95/component-test-helper/actions/workflows/release-package.yml/badge.svg)](https://github.com/Tarmstrong95/component-test-helper/actions/workflows/release-package.yml)

<div id="top"></div>

### Externals

[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]

<!-- PROJECT LOGO -->
<br />

<!-- TABLE OF CONTENTS -->
<details>
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#about-the-project">About The Project</a>
      <ul>
        <li><a href="#built-with">Built With</a></li>
      </ul>
    </li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#prerequisites">Prerequisites</a></li>
        <li><a href="#installation">Installation</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#roadmap">Roadmap</a></li>
    <li><a href="#contributing">Contributing</a></li>
    <li><a href="#license">License</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#acknowledgments">Acknowledgments</a></li>
  </ol>
</details>

<br/>

<!-- ABOUT THE PROJECT -->

## About The Project

This is a solution to React frontend testing. This package provides a class, ComponentTestHelper, to be used in Jest React frontend testing use cases. This class allows
the developer to abstract a lot of the tedious, duplicated, testing that often occurs
when attempting to test the frontend, into reusable functions contained within the bounds of a given components "test helper".

<p align="right">(<a href="#top">back to top</a>)</p>

### Built With

- [TypeScript](https://www.typescriptlang.org/)
- [Testing Libary](https://testing-library.com/)

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- GETTING STARTED -->

## Getting Started

To get the package included in your project, follow these steps

### Installation

using [npm](https://www.npmjs.com/):

```bash
npm i --save-dev component-test-helper
```

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- USAGE EXAMPLES -->

## Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

### import ComponentTestHelper into test file

```typescript
import ComponentTestHelper from 'component-test-helper'
```

### define instance for the component to test in the test file

```typescript
// with a builder
const inputField = new ComponentTestHelper(builder =>
  builder.byTestId('inputFieldContainer')
)

// with a custom ComponentTestHelper - builder only necessary if a custructor wasn't supplied
const inputField = new InputFieldTestHelper(builder =>
  builder.byTestId('inputFieldContainer')
)

// custom with supplied constructor
const inputField = new InputFieldTestHelper()
```

### define custom ComponentTestHelper in another file

```typescript
export class InputFieldTestHelper extends ComponentTestHelper {
  // define child components to test
  readonly input = new ComponentTestHelper(builder =>
    builder.byTestId('inputField')
  )

  // create constructor if you want to hard code the selector for the builder
  constructor() {
    super(builder => builder.byTestId('inputFieldContainer'))
  }

  // define methods for acting and expecting on components
  async expectToHaveValue(value: string | number | null): Promise<void> {
    expect(await this.input.get()).toHaveValue(value)
  }
}
```

_Check out the [examples](https://github.com/Tarmstrong95/component-test-helper/tree/main/src/examples) folder for more details_

<p align="right">(<a href="#top">back to top</a>)</p>

<hr>

See the [open issues](https://github.com/Tarmstrong95/component-test-helper/issues) for a full list of proposed features (and known issues).

<!-- CONTRIBUTING -->

## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- LICENSE -->

## License

Distributed under the MIT License. See `LICENSE.txt` for more information.

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- CONTACT -->

## Contact

Me - [@Triston08227721](https://twitter.com/Triston08227721) - triston95strong@gmail.com

Project Link: [https://github.com/Tarmstrong95/component-test-helper](https://github.com/Tarmstrong95/component-test-helper)

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- MARKDOWN LINKS & IMAGES -->
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->

[contributors-shield]: https://img.shields.io/github/contributors/Tarmstrong95/component-test-helper.svg?style=for-the-badge
[contributors-url]: https://github.com/Tarmstrong95/component-test-helper/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/Tarmstrong95/component-test-helper.svg?style=for-the-badge
[forks-url]: https://github.com/Tarmstrong95/component-test-helper/network/members
[stars-shield]: https://img.shields.io/github/stars/Tarmstrong95/component-test-helper.svg?style=for-the-badge
[stars-url]: https://github.com/Tarmstrong95/component-test-helper/stargazers
[issues-shield]: https://img.shields.io/github/issues/Tarmstrong95/component-test-helper.svg?style=for-the-badge
[issues-url]: https://github.com/Tarmstrong95/component-test-helper/issues
[license-shield]: https://img.shields.io/github/license/Tarmstrong95/component-test-helper.svg?style=for-the-badge
[license-url]: https://github.com/Tarmstrong95/component-test-helper/blob/main/LICENSE
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/triston95strong

---
_Source: https://npm.io/package/component-test-helper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._