no-dom-import.md

Disallow importing from DOM Testing Library

Ensure that there are no direct imports from @testing-library/dom or dom-testing-library when using some testing library framework wrapper.

Rule Details

Testing Library framework wrappers as React Testing Library already re-exports everything from DOM Testing Library so you always have to import DOM Testing Library utils from corresponding framework wrapper module to:

• use proper extended version of some of those methods containing additional functionality related to specific framework (e.g. fireEvent util)
• avoid importing from extraneous dependencies (similar to eslint-plugin-import)

This rule aims to prevent users from import anything directly from @testing-library/dom (or dom-testing-library) and it's useful for new starters or when IDEs autoimport from wrong module.

Examples of incorrect code for this rule:

import { fireEvent } from 'dom-testing-library';

import { fireEvent } from '@testing-library/dom';

const { fireEvent } = require('dom-testing-library');

const { fireEvent } = require('@testing-library/dom');

Examples of correct code for this rule:

import { fireEvent } from 'react-testing-library';

import { fireEvent } from '@testing-library/react';

const { fireEvent } = require('react-testing-library');

const { fireEvent } = require('@testing-library/react');

Options

This rule has an option in case you want to tell the user which framework to use.

Example

{
  "testing-library/no-dom-import": ["error", "react"]
}

With the configuration above, if the user imports from @testing-library/dom or dom-testing-library instead of the used framework, ESLint will tell the user to import from @testing-library/react or react-testing-library.

Further Reading

• Angular Testing Library API
• React Testing Library API
• Vue Testing Library API