Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fnky/react-nodegui-testing-library

Simple React NodeGui testing utilities that encourage good testing practices.
https://github.com/fnky/react-nodegui-testing-library

javascript nodegui react-nodegui testing typescript

Last synced: 27 days ago
JSON representation

Simple React NodeGui testing utilities that encourage good testing practices.

Host: GitHub
URL: https://github.com/fnky/react-nodegui-testing-library
Owner: fnky
License: mit
Created: 2020-03-19T15:01:36.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-01-05T16:39:20.000Z (almost 2 years ago)
Last Synced: 2024-04-26T00:06:20.905Z (8 months ago)
Topics: javascript, nodegui, react-nodegui, testing, typescript
Language: TypeScript
Homepage: https://fnky.github.io/react-nodegui-testing-library
Size: 760 KB
Stars: 8
Watchers: 3
Forks: 1
Open Issues: 16
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome-nodegui - React NodeGui Testing library - Simple React NodeGui testing utilities that encourage good testing practices 🦋 - by [@fnky](https://github.com/fnky) (Tools / Samples and Experiments)

README

        


  

    

  

  

  React NodeGui Testing Library


  
Simple React NodeGui testing utilities that encourage good testing

practices.


  


[**Read The Docs**](https://fnky.github.io/react-nodegui-testing-library)



[![Build Status][build-badge]][build]

[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]

[![MIT License][license-badge]][license]

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

[![Watch on GitHub][github-watch-badge]][github-watch]

[![Star on GitHub][github-star-badge]][github-star]

## The problem

You want to write maintainable tests for your [React

NodeGui](https://github.com/nodegui/react-nodegui) components testing without

implementation details and rather focus on making your tests give you the

confidence for which they are intended.

## This solution

The `react-nodegui-testing-library` is a very lightweight solution for testing

React NodeGui components. It provides light utility functions on top of

`react-test-renderer`, in a way that encourages better testing practices.

The project is heavily based on [`react-native-testing-library`](https://github.com/callstack/react-native-testing-library)

## Installation

This module is distributed via [npm][npm] which is bundled with [node][node] and

should be installed as one of your project's `devDependencies`:

```bash

yarn install --dev react-nodegui-testing-library

# or

npm install --save-dev react-nodegui-testing-library

```

This library has `peerDependencies` listings for `react`, `@nodegui/react-nodegui` and

`react-test-renderer`.

> [**Docs**](https://fnky.github.io/react-nodegui-testing-library)

## Example

```tsx

import React from 'react'

import { View, Text, Button, useEventHandler } from '@nodegui/react-nodegui'

export const HiddenMessage: React.FC = ({ children }) => {

  const [showMessage, setShowMessage] = React.useState(false);

  return (

    

       {

          setShowMessage(prevShowMessage => !!prevShowMessage)

        }}

        text="Show Message"

      />

      {showMessage ? children : null}

    

  )

}

// __tests__/hidden-message.test.ts

import { render, fireEvent } from 'react-nodegui-testing-library';

import { HiddenMessage } from '../HiddenMessage';

test('toggles the children when the button is clicked', () => {

  const testMessage = 'Test Message';

  const { getByText, queryByText } = render(

    

      {testMessage}

    

  );

  // query* functions will return the element or null if it cannot be found

  // get* functions will return the element or throw an error if it cannot be found

  expect(queryByText(testMessage)).toBeNull();

  // the queries can accept a regex to make your selectors more resilient to content tweaks and changes.

  fireEvent.click(getByText(/show/i));

  expect(getByText(testMessage)).toBeDefined();

});

```

## Docs

[**Read The Docs**](https://fnky.github.io/react-nodegui-testing-library)

## Contributors

Thanks goes to these people ([emoji key][emojis]):

  

    
_{Christian Petersen}
💻 📖 🚇 ⚠️

  

This project follows the [all-contributors][all-contributors] specification.

Contributions of any kind welcome!

## LICENSE

[MIT](LICENSE)

[npm]: https://www.npmjs.com/

[node]: https://nodejs.org

[build-badge]: https://github.com/fnky/react-nodegui-testing-library/workflows/Tests/badge.svg?style=flat-square

[build]: https://github.com/fnky/react-nodegui-testing-library

[version-badge]: https://img.shields.io/npm/v/react-nodegui-testing-library.svg?style=flat-square

[package]: https://www.npmjs.com/package/react-nodegui-testing-library

[downloads-badge]: https://img.shields.io/npm/dm/react-nodegui-testing-library.svg?style=flat-square

[npmtrends]: http://www.npmtrends.com/react-nodegui-testing-library

[license-badge]: https://img.shields.io/npm/l/react-nodegui-testing-library.svg?style=flat-square

[license]: https://github.com/fnky/react-nodegui-testing-library/blob/master/LICENSE

[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

[prs]: http://makeapullrequest.com

[github-watch-badge]: https://img.shields.io/github/watchers/fnky/react-nodegui-testing-library.svg?style=social

[github-watch]: https://github.com/fnky/react-nodegui-testing-library/watchers

[github-star-badge]: https://img.shields.io/github/stars/fnky/react-nodegui-testing-library.svg?style=social

[github-star]: https://github.com/fnky/react-nodegui-testing-library/stargazers

[emojis]: https://github.com/all-contributors/all-contributors#emoji-key

[all-contributors]: https://github.com/all-contributors/all-contributors

[bugs]: https://github.com/fnky/react-nodegui-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc

[requests]: https://github.com/fnky/react-nodegui-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen

[good-first-issue]: https://github.com/fnky/react-nodegui-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+

[stackoverflow]: https://stackoverflow.com/questions/tagged/react-nodegui-testing-library