toContainHTML在HTML元素存在时提供错误(React测试)

Question

todoElement应该包含一个strike元素，但我的测试表明并非如此。我在Todo函数中声明，如果文本完成，那么它应该呈现一个包含h1元素的strike元素。为什么我的测试不能识别攻击元素？

// Todo.js
import React from 'react'

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

export default Todo

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

function App() {
  const todos = [
    { id: 1, title: 'wash dishes', completed: false },
    { id: 2, title: 'make dinner', completed: 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-completed todo component', () => {
  const todo = { id: 1, title: 'wash dishes', completed: false }
  render(<Todo todo={todo} />) 
  const todoElement = screen.getByTestId('todo-1') 
  expect(todoElement).toBeInTheDocument() 
  expect(todoElement).toHaveTextContent('wash dishes')
})

test('should render completed todo component', () => {
  const todo = { id: 2, title: 'wash car', completed: 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

Answer 1

正如@Guy Perry提到的，你可以使用toMatchSnapshot。我是这样做的：

todo.js

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

export default Todo;

todo.test.js

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