@lynx-js/react/testing-library

ReactLynx Testing Library is a simple and complete ReactLynx unit testing library that encourages good testing practices.

Inspired completely by react-testing-library

Similar to react-testing-library, this library is designed to test your ReactLynx components in the same way you would test React components using react-testing-library.

Setup

Setup vitest:

// vitest.config.js
import { defineConfig, mergeConfig } from 'vitest/config';
import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';

const defaultConfig = createVitestConfig();
const config = defineConfig({
  test: {
    // ...
  },
});

export default mergeConfig(defaultConfig, config);

Then you can start writing tests and run them with vitest!

Usage

import '@testing-library/jest-dom';
import { test, expect } from 'vitest';
import { render } from '@lynx-js/react/testing-library';

test('renders options.wrapper around node', async () => {
  const WrapperComponent = ({ children }) => (
    <view data-testid='wrapper'>{children}</view>
  );
  const Comp = () => {
    return <view data-testid='inner' style='background-color: yellow;' />;
  };
  const { container, getByTestId } = render(<Comp />, {
    wrapper: WrapperComponent,
  });
  expect(getByTestId('wrapper')).toBeInTheDocument();
  expect(container.firstChild).toMatchInlineSnapshot(`
    <view
      data-testid="wrapper"
    >
      <view
        data-testid="inner"
        style="background-color: yellow;"
      />
    </view>
  `);
});

💡 Since our testing environment (@lynx-js/testing-environment) is based on jsdom, You may also be interested in installing @testing-library/jest-dom so you can use the custom jest matchers.

Examples

See our examples for more usage.

Credits

  • Testing Library for the testing utilities and good practices for React testing.

References

QueryByBoundAttribute

Re-exports QueryByBoundAttribute


QueryByRole

Re-exports QueryByRole


QueryByText

Re-exports QueryByText


QueryMethod

Re-exports QueryMethod


SelectorMatcherOptions

Re-exports SelectorMatcherOptions


WithSuggest

Re-exports WithSuggest

Namespaces

NamespaceDescription
queries-
queryHelpers-

Classes

ClassDescription
LynxTestingEnvA pure-JavaScript implementation of the Lynx Spec, notably the Element PAPI and Dual-threaded Model for use with Node.js.

Interfaces

InterfaceDescription
ByRoleOptions-
Config-
ConfigFn-
DefaultNormalizerOptions-
LogRolesOptions-
MatcherOptions-
NormalizerOptions-
PrettyDOMOptions-
Queries-
QueryOptions-
RenderHookOptionsThe options for renderHook
RenderHookResultThe result of renderHook
RenderOptionsThe options for render.
Suggestion-
waitForOptions-

Type Aliases

Type aliasDescription
AllByAttribute-
AllByBoundAttribute-
AllByRole-
AllByText-
BoundFunction-
BoundFunctions-
BuiltQueryMethods-
ByRoleMatcher-
CreateFunction-
CreateObject-
ElementTreeThe lynx element tree
EventType-
FindAllBy-
FindAllByBoundAttribute-
FindAllByRole-
FindAllByText-
FindBy-
FindByBoundAttribute-
FindByRole-
FindByText-
FireFunction-
FireObject-
GetAllBy-
GetBy-
GetByBoundAttribute-
GetByRole-
GetByText-
GetErrorFunction-
Match-
Matcher-
MatcherFunction-
Method-
NormalizerFn-
Query-
QueryArgs-
QueryBy-
QueryByAttribute-
RenderResultThe result of render
Screen-
Variant-

Variables

VariableDescription
prettyFormat-
screen-

Functions

FunctionDescription
buildQueries-
cleanupCleanup elements rendered to the page and Preact trees that were mounted with render.
computeHeadingLevel-
configure-
createEvent-
findAllByAltText-
findAllByDisplayValue-
findAllByLabelText-
findAllByPlaceholderText-
findAllByRole-
findAllByTestId-
findAllByText-
findAllByTitle-
findByAltText-
findByDisplayValue-
findByLabelText-
findByPlaceholderText-
findByRole-
findByTestId-
findByText-
findByTitle-
fireEvent-
getAllByAltText-
getAllByDisplayValue-
getAllByLabelText-
getAllByPlaceholderText-
getAllByRole-
getAllByTestId-
getAllByText-
getAllByTitle-
getByAltText-
getByDisplayValue-
getByLabelText-
getByPlaceholderText-
getByRole-
getByTestId-
getByText-
getByTitle-
getConfig-
getDefaultNormalizer-
getElementError-
getNodeText-
getQueriesForElement-
getRoles-
getSuggestedQuery-
isInaccessiblehttps://testing-library.com/docs/dom-testing-library/api-helpers#isinaccessible
logDOM-
logRoles-
prettyDOM-
queryAllByAltText-
queryAllByAttribute-
queryAllByDisplayValue-
queryAllByLabelText-
queryAllByPlaceholderText-
queryAllByRole-
queryAllByTestId-
queryAllByText-
queryAllByTitle-
queryByAltText-
queryByAttribute-
queryByDisplayValue-
queryByLabelText-
queryByPlaceholderText-
queryByRole-
queryByTestId-
queryByText-
queryByTitle-
renderRender into the page. It should be used with cleanup.
renderHookAllows you to render a hook within a test React component without having to create that component yourself.
waitFor-
waitForElementToBeRemoved-
waitScheduleWait for the next event loop.
within-
Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.