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

参考

QueryByBoundAttribute

重新导出 QueryByBoundAttribute


QueryByRole

重新导出 QueryByRole


QueryByText

重新导出 QueryByText


QueryMethod

重新导出 QueryMethod


SelectorMatcherOptions

重新导出 SelectorMatcherOptions


WithSuggest

重新导出 WithSuggest

命名空间

Namespace 描述
queries -
queryHelpers -

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

接口

Interface 描述
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 alias 描述
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 -

变量

Variable 描述
prettyFormat -
screen -

函数

Function 描述
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 -
除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。