<img
height="80"
width="80"
alt="butterfly"
src="https://raw.githubusercontent.com/fnky/react-nodegui-testing-library/master/other/butterfly.png"
/>React NodeGui Testing Library
Simple React NodeGui testing utilities that encourage good testing practices.
Read The Docs
!Build Statusbuild-badgebuild !versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense
!Watch on GitHubgithub-watch-badgegithub-watch !Star on GitHubgithub-star-badgegithub-star
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
Thereact-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-libraryInstallation
This module is distributed via npmnpm which is bundled with nodenode and should be installed as one of your project'sdevDependencies:yarn install --dev react-nodegui-testing-library
# or
npm install --save-dev react-nodegui-testing-libraryThis 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 DocsContributors
Thanks goes to these people (emoji keyemojis):This project follows the all-contributorsall-contributors specification. Contributions of any kind welcome!
