使用 Chai 和 Jest 测试"HTMLElement"DOM 元素时出错

Question

假设我有一个非常简单的组件，它接受一些props并为无效状态呈现一个简单的<div>：

// InvalidState.js
// Renders an "Invalid" state display
const render = (props = {}) => {
// Create the <div> element
let div = document.createElement('div');
div.classList.add('my-component');
div.classList.add('my-component--invalid');
div.innerHTML = props.message;
return div;
};
export { render };

我使用 Jest 作为测试运行器，chai作为期望/断言库。

为了测试上述内容，我尝试了;

// InvalidState.test.js
import { expect } from 'chai';
import * as InvalidState from './InvalidState';
let wrapper;
describe('<InvalidState />', () => {
it('renders the component', () => {
// Call to `render()` returns an HTMLElement
// (Specifcally, a HTMLDivElement)
wrapper = InvalidState.render({ message: 'some message' });
// Find an element by class name
const invalid = wrapper.getElementsByClassName('.my-component--invalid')[0];
// Test its contents
expect(invalid).to.have.text('some message');
});
});

但是我收到错误

expect(invalid).to.have.text(InvalidState.DEFAULT_MESSAGE);
^
Invalid Chai property: text. Did you mean "that"?

1. chai 和 jest 是我应该在测试 HTML 元素时使用的正确库吗？还是有更好的选择？

2. 为什么上面的text()方法无法正确执行？

谢谢！

Answer 1

我发现text()仅适用于chai-jquery。或者至少这张备忘单是这么说的：https://devhints.io/chai

我修改了它以使用innerText并且工作正常

div.innerText = props.message;

expect(wrapper.innerText.eql(InvalidState.DEFAULT_MESSAGE);