React NodeGui Testing Library

Simple React NodeGui testing utilities that encourage good testing practices.

Read The Docs

The problem

You want to write maintainable tests for your 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

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

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

Example

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 (
    <View>
      <Button
        on={clicked: () => {
          setShowMessage(prevShowMessage => !!prevShowMessage)
        }}
        text="Show Message"
      />
      {showMessage ? children : null}
    </View>
  )
}

// __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(
    <HiddenMessage>
      <Text>{testMessage}</Text>
    </HiddenMessage>
  );

  // 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

Contributors

Thanks goes to these people (emoji key):

Christian Petersen 💻 📖 🚇 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT