Блог

Главная - Вопросы по программированию - Реагируйте на шутку тестирование : TestingLibraryElementError: Не удается найти элемент

Реагируйте на шутку тестирование : TestingLibraryElementError: Не удается найти элемент

#reactjs #jestjs #testing-library

Вопрос:

я не могу получить идентификатор теста в рамках моего шутливого теста. Я новичок в тестировании реакций. Я хочу протестировать этот компонент и вернуть, например, текст h3, который был дан ранее.

Говорит мне:
«TestingLibraryElementError: Не удалось найти элемент по: [data-testid=»testH3″]»

Вы не могли бы мне помочь?

 // Component
import React from 'react';
import './Card.scss'; 
import Card from '@material-ui/core/Card';
import { Link } from "react-router-dom";

function MovieCard({title, image}) {
    return (
        <div className="card__container">
            <Link to={"/details/"   title}>
                <Card className="card">
                    <img src={image} alt=""/>
                    <div className="card__info">
                        <h3 
                            data-testid="testH3"
                            className="card__title">{ title }
                        </h3>
                    </div>
                </Card>            
            </Link>
        </div>
    )
}

export default MovieCard

 
 // test
import React from 'react';
import { render, screen, cleanup } from '@testing-library/react';
import MovieCard from '../MovieCard';
import { BrowserRouter as Router } from "react-router-dom";

afterEach(cleanup);

describe('Test MovieCard', () => {
  const tree = render(
    <Router>
      <MovieCard title="Batman" image="imagesrc"/>
    </Router>
  )

  it('should match with snapshot', () => {
    screen.debug();
    expect(tree).toMatchSnapshot();
   });

   it('test h3', () => {
     const {getByTestId} = tree;
     const element = screen.getByTestId('testH3')
    });
  });

Обновить:

Окончательный код теперь работает довольно хорошо. Спасибо вам, ребята

 import React from 'react';
import { render, screen, cleanup } from '@testing-library/react';
import MovieCard from '../MovieCard';
import { BrowserRouter as Router } from "react-router-dom";

afterEach(cleanup);

describe('Test MovieCard', () => {
  function tree() {
    return render(
      <Router>
        <MovieCard title="Batman" image="imagesrc"/>
      </Router>
    )
  }

  it('should match with snapshot', () => {
    expect(tree()).toMatchSnapshot();
   });

   it('test h3 text is Batman', () => {
     const {getByTestId} = tree();
     const element = screen.getByTestId('testH3')
     expect(element.textContent).toEqual("Batman")
     screen.debug();
    });
  });

Комментарии:

1. выполняется ли рендеринг вашего компонента в тестовой среде?

2. Вы должны переместить рендеринг компонента внутрь перед началом .

3. да, он отображается правильно. я вижу это на экране.отладка()

4. когда я помещаю функцию дерева в beforeEach, я получаю: ошибка ссылки: дерево не определено

5. beforeEach Следует задать let переменные, которые находятся в области describe обратного вызова. Вы также можете переместить рендеринг в каждый it блок, который достигает той же цели: сохранение каждого it состояния блока отдельно. Никогда не позволяйте отрисованному компоненту переноситься из одного it блока в другой. Это делает тесты ненадежными и им трудно доверять.

Ответ №1:

используйте function вместо const 

 describe('Test MovieCard', () => {
  function tree() {
    return render(
      <Router>
        <MovieCard title="Batman" image="imagesrc"/>
      </Router>
    )
  }

  it('should match with snapshot', () => {
    screen.debug();
    expect(tree()).toMatchSnapshot();
   });

   it('test h3', () => {
     const {getByTestId} = tree();
     const element = screen.getByTestId('testH3')
    });
  });

Комментарии:

1. когда я это делаю, я получаю еще одну ошибку: ошибка типа: Не удается уничтожить свойство «getByTestId «» дерева (…)», поскольку оно не определено.

2. это очевидно, так как я не вернул этот отрисованный компонент. Обновил ответ. не могли бы вы проверить еще раз?

3. Да, теперь это работает, спасибо. окончательный код выше в обновлении

4. в вашем обновленном коде вы получите только getByTestId .

5. Может быть, вы посмотрели код в ответах? Я обновил код вверху.

Метки: