#@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

#Rstest

Setup rstest with @lynx-js/react/testing-library/rstest-config.

Recommended for library projects:

import { defineConfig } from '@rstest/core';
import { withDefaultConfig } from '@lynx-js/react/testing-library/rstest-config';

export default defineConfig({
  extends: withDefaultConfig(),
});

Use withLynxConfig when you want to reuse your app's lynx.config.ts:

// rstest.config.ts
import { defineConfig } from '@rstest/core';
import { withLynxConfig } from '@lynx-js/react/testing-library/rstest-config';

export default defineConfig({
  extends: withLynxConfig(),
});

Difference between withLynxConfig and withDefaultConfig:

• withLynxConfig: app-oriented. Loads your lynx.config.ts and converts it to rstest config, so rspeedy/lynx settings are reused in tests.
• withDefaultConfig: library-oriented. Only applies testing-library defaults (jsdom, setup files, globals) and lets you provide the rest via modifyRstestConfig.

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

For more usage detail, see https://rstest.rs/

#Vitest

Setup vitest:

import { defineConfig } from 'vitest/config';
import { vitestTestingLibraryPlugin } from '@lynx-js/react/testing-library/plugins';

export default defineConfig({
  plugins: [
    vitestTestingLibraryPlugin(),
  ],
  test: {
    // ...
  },
});

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

createVitestConfig is still supported for backward compatibility, but is deprecated.

#Usage

import '@testing-library/jest-dom';
import { test, expect } from 'vitest'; // or '@rstest/core'
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.

#参考

#prettyFormat

重命名并重新导出 act

#QueryByBoundAttribute

重新导出 QueryByBoundAttribute

#QueryByRole

重新导出 QueryByRole

#QueryByText

重新导出 QueryByText

#QueryMethod

重新导出 QueryMethod

#SelectorMatcherOptions

重新导出 SelectorMatcherOptions

#WithSuggest

重新导出 WithSuggest

#命名空间

#类

#接口

#类型别名

#变量

#函数