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

Question

tod​​oElement 应该包含一个 strike 元素，但我的测试另有说明。我已经在我的 Todo 函数中声明，如果文本已完成，那么它应该呈现一个包含 h1 元素的 strike 元素。为什么我的测试无法识别 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

toContainHtml方法期望通过 html标记为没有标记符号的字符串 所以你需要更换 '<strike>'与 'strike' .

您的代码行应如下所示。

expect(todoElement).toContainHTML('strike')