javascript - toContainHTML providing an error when HTML element exists (React Testing) - Stack Overflow

admin管理员组

文章数量:1264813

todoElement is supposed to contain a strike element but my test says otherwise. I've declared in my Todo function that if text is pleted then it should render a strike element containing a h1 element. Why can't my test identify the strike element?

// Todo.js
import React from 'react'

function Todo({ todo }) {
  const { id, title, pleted } = todo
  const h1 = <h1>{title}</h1>
  const text = pleted ? <strike>{h1}</strike> : h1
  return <div data-testid={`todo-${id}`}>{text}</div>
}

export default Todo

// App.js
import Todo from './ponents/Todo'

function App() {
  const todos = [
    { id: 1, title: 'wash dishes', pleted: false },
    { id: 2, title: 'make dinner', pleted: true },
  ]

  return (
    <div>
      {todos.map((todo) => {
        return <Todo todo={todo} />
      })}
    </div>
  )
}

export default App

// todo.test.js
import { render, screen, cleanup } from '@testing-library/react'
import Todo from '../Todo'
import '@testing-library/jest-dom'

afterEach(() => {
  cleanup() 
})

test('should render non-pleted todo ponent', () => {
  const todo = { id: 1, title: 'wash dishes', pleted: false }
  render(<Todo todo={todo} />) 
  const todoElement = screen.getByTestId('todo-1') 
  expect(todoElement).toBeInTheDocument() 
  expect(todoElement).toHaveTextContent('wash dishes')
})

test('should render pleted todo ponent', () => {
  const todo = { id: 2, title: 'wash car', pleted: true }
  render(<Todo todo={todo} />) 
  const todoElement = screen.getByTestId('todo-2') 
  expect(todoElement).toBeInTheDocument() 
  expect(todoElement).toHaveTextContent('wash car')
  expect(todoElement).toContainHTML('<strike>')
})

Error Message

todoElement is supposed to contain a strike element but my test says otherwise. I've declared in my Todo function that if text is pleted then it should render a strike element containing a h1 element. Why can't my test identify the strike element?

// Todo.js
import React from 'react'

function Todo({ todo }) {
  const { id, title, pleted } = todo
  const h1 = <h1>{title}</h1>
  const text = pleted ? <strike>{h1}</strike> : h1
  return <div data-testid={`todo-${id}`}>{text}</div>
}

export default Todo

// App.js
import Todo from './ponents/Todo'

function App() {
  const todos = [
    { id: 1, title: 'wash dishes', pleted: false },
    { id: 2, title: 'make dinner', pleted: true },
  ]

  return (
    <div>
      {todos.map((todo) => {
        return <Todo todo={todo} />
      })}
    </div>
  )
}

export default App

// todo.test.js
import { render, screen, cleanup } from '@testing-library/react'
import Todo from '../Todo'
import '@testing-library/jest-dom'

afterEach(() => {
  cleanup() 
})

test('should render non-pleted todo ponent', () => {
  const todo = { id: 1, title: 'wash dishes', pleted: false }
  render(<Todo todo={todo} />) 
  const todoElement = screen.getByTestId('todo-1') 
  expect(todoElement).toBeInTheDocument() 
  expect(todoElement).toHaveTextContent('wash dishes')
})

test('should render pleted todo ponent', () => {
  const todo = { id: 2, title: 'wash car', pleted: true }
  render(<Todo todo={todo} />) 
  const todoElement = screen.getByTestId('todo-2') 
  expect(todoElement).toBeInTheDocument() 
  expect(todoElement).toHaveTextContent('wash car')
  expect(todoElement).toContainHTML('<strike>')
})

Error Message

• javascript
• reactjs
• testing
• react-testing-library

Share Improve this question Follow edited Aug 25, 2023 at 16:58 samo0ha 3,79622 gold badges2727 silver badges2929 bronze badges asked Oct 3, 2021 at 7:46 Mohamed RifaathMohamed Rifaath 4711 silver badge99 bronze badges 1

• 1 it's because strike is not a regular html element, use .toMatchSnapshot(); instead – Guy Perry Commented Oct 3, 2021 at 8:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 15

toContainHtml method expects to pass html tag as a string without tag notaion so you need to replace '<strike>' with 'strike'.

your code line should look like this.

expect(todoElement).toContainHTML('strike')

as @Guy Perry mentioned you can use toMatchSnapshot instead. this is how I did it:

todo.js

const Todo = ({todo}) => {
  const { id, pleted, name } = todo;
  const h1 = <h1>{name}</h1>;
  const title = pleted ? <strike>{h1}</strike> : h1;
  return(
    <div data-testid={`todo-${id}`}>{title}</div>
  );
}

export default Todo;

todo.test.js

test('pleted todo ponent should be rendered', () => {
  const sample = {id: 2, name: 'grocery shopping', pleted: true};
  render(<Todo todo={sample}/>);
  const todoElement = screen.getByTestId(`todo-${sample.id}`);
  expect(todoElement).toBeInTheDocument();
  expect(todoElement).toHaveTextContent(sample.name);
  expect(todoElement).toMatchSnapshot('<strike>');
});

本文标签： javascripttoContainHTML providing an error when HTML element exists (React Testing)Stack Overflow