@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

Namespace Description
queries -
queryHelpers -

Classes

Class Description
LynxTestingEnv A pure-JavaScript implementation of the Lynx Spec, notably the Element PAPI and Dual-threaded Model for use with Node.js.

Interfaces

Interface Description
ByRoleOptions -
Config -
ConfigFn -
DefaultNormalizerOptions -
LogRolesOptions -
MatcherOptions -
NormalizerOptions -
PrettyDOMOptions -
Queries -
QueryOptions -
RenderHookOptions The options for renderHook
RenderHookResult The result of renderHook
RenderOptions The options for render.
Suggestion -
waitForOptions -

Type Aliases

Type alias Description
AllByAttribute -
AllByBoundAttribute -
AllByRole -
AllByText -
BoundFunction -
BoundFunctions -
BuiltQueryMethods -
ByRoleMatcher -
CreateFunction -
CreateObject -
ElementTree The 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 -
RenderResult The result of render
Screen -
Variant -

Variables

Variable Description
prettyFormat -
screen -

Functions

Function Description
buildQueries -
cleanup Cleanup 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 -
isInaccessible https://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 -
render Render into the page. It should be used with cleanup.
renderHook Allows you to render a hook within a test React component without having to create that component yourself.
waitFor -
waitForElementToBeRemoved -
waitSchedule Wait 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.