Skip to content

Latest commit

 

History

History
90 lines (64 loc) · 2.64 KB

no-dom-import.md

File metadata and controls

90 lines (64 loc) · 2.64 KB
Raw

Disallow importing from DOM Testing Library (testing-library/no-dom-import)

💼 This rule is enabled in the following configs: angular, marko, react, vue.

🔧 This rule is automatically fixable by the --fix CLI option.

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 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, which is 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';
import { render } from '@testing-library/react'; // Okay, no error
import { screen } from '@testing-library/dom'; // Error, unnecessary import 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