@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

Type Aliases

Variables

VariableDescription
prettyFormat-
screen-

Functions

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.