# @jest-decorated/react

> Decorators for writing jest-based tests for react components.

Latest version **0.1.7** (published 2022-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @jest-decorated/react
pnpm add @jest-decorated/react
yarn add @jest-decorated/react
bun add @jest-decorated/react
```

## Health

**Score 30/100 (F)** — status: abandoned.

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2022-01-21 |
| First published | 2019-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 782.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 47 |
| Author | Vitalii Shapovalov |
| Maintainers | shapovalov_v |
| Keywords | jest, react, decorators, typescript, react testing, jest-decorated, jest decorators, jest typescript |

## Links

- npm: https://www.npmjs.com/package/@jest-decorated/react
- Repository: https://github.com/vitalishapovalov/jest-decorated
- Homepage: https://github.com/vitalishapovalov/jest-decorated#readme
- Issues: https://github.com/vitalishapovalov/jest-decorated/issues
- npm.io page: https://npm.io/package/@jest-decorated/react

## Dependencies (2)

- [@jest-decorated/shared](https://npm.io/package/@jest-decorated/shared.md) ^0.1.7
- [@js-utilities/typecheck](https://npm.io/package/@js-utilities/typecheck.md) ^0.1.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.7 (latest) — 2022-01-21
- 0.1.6 — 2022-01-09
- 0.1.5 — 2022-01-07
- 0.1.5-beta.2 — 2022-01-07
- 0.1.4 — 2021-11-16
- 0.1.3 — 2021-11-14
- 0.1.3-beta2 — 2021-11-14
- 0.1.3-beta1 — 2021-11-14
- 0.1.2 — 2021-11-08
- 0.1.1 — 2021-09-07
- 0.1.0 — 2021-08-08
- 0.1.0-beta.2 — 2021-08-08
- 0.0.23 — 2021-04-27
- 0.0.22 — 2021-04-26
- 0.0.20 — 2021-02-07
- … 17 more at https://npm.io/package/@jest-decorated/react/versions

## README

# Decorators for writing jest-based tests for react components

Extension of [@jest-decorated](https://vitalishapovalov.github.io/jest-decorated) package.

Utilities for testing `react` components. Compatible with `enzyme`, `@testing-libray/react` and `react-dom/test-utils`.

Make sure to register `ReactTestRunner` on your parent test.

Jest test:

```typescript jsx
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import MyComponent from "../MyComponent";

describe("MyComponentTest", () => {
    
    let container = null;
    
    beforeEach(() => {
      container = document.createElement("span");
      document.body.appendChild(container);
    });
    
    afterEach(() => {
      unmountComponentAtNode(container);
      container.remove();
      container = null;
    });
    
    const renderWithProps = (props = {}) => {
        act(() => {
           render(<MyComponent {...props} />, container); 
        });
    };
    
    it("turned on by default", () => {
        renderWithProps();
        
        const button = document.querySelector("[data-testid=toggle]");
        expect(button.innerHTML).toBe("Turn on");
    });
    
    it("changes value when clicked, calls onChange", () => {
        const passedProps = { onChange: jest.fn() };
        renderWithProps(passedProps);
        
        const button = document.querySelector("[data-testid=toggle]");
        button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
        expect(passedProps.onChange).toHaveBeenCalledTimes(1);
        expect(button.innerHTML).toBe("Turn off");
    });
});
```
 
Same test with `@jest-decorated`:

```typescript jsx
import { render } from "react-dom/test-utils";

@Describe()
@RunWith(ReactTestRunner)
class MyComponentTest {
    
    @ComponentContainer()
    container;
    
    @Act()
    @ComponentProvider("../MyComponent")
    provider(MyComponent, passedProps) {
        return render(<MyComponent {...passedProps} />, this.container);
    }
    
    @It("turned on by default")
    isTurnOn(component, { props }) {
        const button = document.querySelector("[data-testid=toggle]");
        expect(button.innerHTML).toBe("Turn on");
    }
    
    @It("changes value when clicked, calls onChange")
    @WithProps({ onChange: jest.fn() })
    shouldToggle(component, { props }) {
        const button = document.querySelector("[data-testid=toggle]");
        button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
        expect(props.onChange).toHaveBeenCalledTimes(1);
        expect(button.innerHTML).toBe("Turn off");
    }
}
 ```

## Install & Setup

Read [here](https://github.com/vitalishapovalov/jest-decorated/blob/master/README.md#install).

## Decorators

### [@Act](https://github.com/vitalishapovalov/jest-decorated/blob/master/docs/react/Act.md)

### [@ActAsync](https://github.com/vitalishapovalov/jest-decorated/blob/master/docs/react/Act.md)

### [@ComponentContainer](https://github.com/vitalishapovalov/jest-decorated/blob/master/docs/react/ComponentContainer.md)

### [@ComponentProvider](https://github.com/vitalishapovalov/jest-decorated/blob/master/docs/react/ComponentProvider.md)

### [@DefaultContext](https://github.com/vitalishapovalov/jest-decorated/blob/master/docs/react/DefaultContext.md)

### [@DefaultProps](https://github.com/vitalishapovalov/jest-decorated/blob/master/docs/react/DefaultProps.md)

### [@WithContext](https://github.com/vitalishapovalov/jest-decorated/blob/master/docs/react/WithContext.md)

### [@WithProps](https://github.com/vitalishapovalov/jest-decorated/blob/master/docs/react/WithProps.md)

### [@WithState](https://github.com/vitalishapovalov/jest-decorated/blob/master/docs/react/WithState.md)

## Contributing

[Contribution guidelines for this project](https://github.com/vitalishapovalov/jest-decorated/blob/master/CONTRIBUTING.md)

## License

[MIT License](https://github.com/vitalishapovalov/jest-decorated/blob/master/LICENSE)

---
_Source: https://npm.io/package/@jest-decorated/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._