Tag: Jest

Avoid Direct Node Access in Testing Library: Error Explained with Fixes & Examples

While writing tests using React Testing Library, you may see this warning:

Avoid direct Node access. Prefer using the methods from Testing Library

This can be confusing, especially for beginners

In this guide, you’ll learn:

  • What this warning means
  • Why it happens
  • How to fix it (step-by-step)
  • Best practices with examples

What Does This Error Mean?

👉 In simple terms:

You are accessing DOM elements directly (like document.querySelector) instead of using Testing Library methods.

❌ Example That Causes This Warning

const element = document.querySelector('.btn');
expect(element.textContent).toBe('Submit');

👉 Problem:

  • Direct DOM access
  • Not user-focused ❌

Why This is a Problem?

Testing Library follows this principle:

✅ “Test the app the way users use it”

Users don’t use:

  • querySelector
  • getElementById

👉 They interact with:

  • Text
  • Buttons
  • Labels

Correct Way Using Testing Library

Example Fix

import { render, screen } from '@testinglibrary/react';

render(<button>Submit</button>);
const button = screen.getByText('Submit');
expect(button).toBeInTheDocument();

👉 Now:

  • Uses Testing Library methods ✅
  • Matches real user behavior ✅

Common Scenarios & Fixes

❌ Scenario 1: Using querySelector

const el = container.querySelector('.title');

✅ Fix

screen.getByText('Title');

❌ Scenario 2: Using getElementById

document.getElementById('username');

✅ Fix

screen.getByLabelText('Username');

❌ Scenario 3: Accessing container directly

const { container } = render(<App />);
const el = container.firstChild;

✅ Fix

screen.getByRole('heading');

Best Queries to Use

Testing Library provides powerful queries:

By Role (Best)

screen.getByRole('button');

By Text

screen.getByText('Submit');

By Label

screen.getByLabelText('Email');

By Placeholder

screen.getByPlaceholderText('Enter name');

Query Priority (Very Important)

Follow this order:

  1. getByRole
  2. getByLabelText
  3. getByText
  4. getByPlaceholderText
  5. getByTestId (last option)

When is Direct DOM Access Allowed?

👉 Rare cases only:

  • Debugging
  • Complex DOM structure
  • No accessible selectors available

Example:

const { container } = render(<App />);
console.log(container.innerHTML);

Real-World Example

❌ Bad Test

const { container } = render(<button>Login</button>);
expect(container.firstChild.textContent).toBe('Login');

✅ Good Test

render(<button>Login</button>);
expect(screen.getByText('Login')).toBeInTheDocument();

Why Testing Library Recommends This

  • Better readability
  • More maintainable tests
  • Closer to real user behavior
  • Encourages accessibility

Common Mistakes

❌ Overusing getByTestId

👉 Use only when necessary

❌ Ignoring accessibility

👉 Use roles and labels

❌ Writing implementation-based tests

👉 Focus on user behavior

Interview Tip

If asked:

“Why avoid direct DOM access?”

👉 Answer:

“Because Testing Library encourages testing from the user’s perspective using accessible queries instead of implementation details.”

Final Summary

  • Avoid direct DOM methods (querySelector, getElementById)
  • Use Testing Library queries (getByRole, getByText)
  • Write user-focused tests
  • Follow query priority
💡 Writing tests? Subscribe to get simple testing guides, real-world examples, and debugging tips. Happy Coding!

Solution: TypeError: Cannot read properties of undefined (reading ‘DemoContainer’) and failing because of components={[‘DatePicker’, ‘TimePicker’]} in the DemoContainer tag.

We will get this error because we are mocking ‘@mui/x-date-pickers/internals/demo’ as follows.

jest.mock('@mui/x-date-pickers/internals/demo', () => {
  DemoContainer: jest.fn((props) => {
    return null;
  })
})

but here it is not covering  components={[‘DatePicker’, ‘TimePicker’]} in the <DemoContainer components={[‘DatePicker’, ‘TimePicker’]}> as we are returning null in the mock. So it is throwing the error as Cannot read properties of undefined (reading ‘DemoContainer’). So here we need to mock DatePicker and TimePicker as follows.

import { render } from '@testing-library/react';
import * as React from 'react';
import App from './index';


const DatePickerMock = () => <div>Mocked DatePicker</div>;
const TimePickerMock = () => <div>Mocked TimePicker</div>

jest.mock('@mui/x-date-pickers/internals/demo', () => ({
  DemoContainer: jest.fn(({ components }) => (
    <div>
      {components.includes('DatePicker') && <DatePickerMock />}
      {components.includes('TimePicker') && <TimePickerMock />}
    </div>
  )),
}))

const renderApp = () => {
  return render(
    <App />
  );
};

describe('App Component', () => {
  it('renders without crashing', () => {
    const { asFragment } = renderApp();

    expect(asFragment()).toMatchSnapshot();
  });
 
});

Solution: Jest encountered an unexpected token and failing at —- import { DemoContainer } from ‘@mui/x-date-pickers/internals/demo’

If test cases are failing with the error message Jest encountered an unexpected token and shows SyntaxError: Unexpected token ‘export’ at line import { DemoContainer } from ‘@mui/x-date-pickers/internals/demo’, then we need to mock ‘@mui/x-date-pickers/internals/demo’ as follows.

import * as React from 'react';
import { render } from '@testing-library/react';
import App from './index';


jest.mock('@mui/x-date-pickers/internals/demo', () => {
  DemoContainer: jest.fn((props) => {
    return null;
  })
})

const renderApp = () => {
  return render(
        <App />
  );
};

describe('App Component', () => {
  it('renders without crashing', () => {
    const { asFragment } = renderApp();

    expect(asFragment()).toMatchSnapshot();
  });
 
});

Mock a function or setState using jest in ReactJS.

lets assume that we need to mock setStatus(). So, in test file we will mock by using jest as follows.

const setStatus = jest.fn();

const renderUserProfile = (props = {}) => {
    return render(
                <UserProfile status={true} setStatus={setStatus} />
              )
    }

const userProps1 = Props = {
 status: true,
 setStatus
}

const userProps2 = Props = {
 status: false,
 setStatus
}

describe('Component UserProfile', () => {
  it("user status with true", () => {
    renderUserProfile(userProps1);
    const buttonElement = screen.getByRole("button").toHaveContext("Online");
    fireEvent.click(userProps1);
    expect(setStatus).toHaveBeenCalled();
  });
  it("user status with false", () => {
    renderUserProfile(userProps1);
    const buttonElement = screen.getByRole("button").toHaveContext("Offline");
    fireEvent.click(userProps2);
    expect(setStatus).toHaveBeenCalled();
  });

})