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

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>')
})

错误消息

Answer 1

toContainHtml方法期望将html标记作为不带标记符号的字符串传递所以你需要用'strike'代替'<strike>'。

你的代码行应该是这样的。

expect(todoElement).toContainHTML('strike')

Answer 2

正如@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>');
});