使用 Chai 和 Jest 測試“HTMLElement”DOM 元素時出錯

Question

假設我有一個非常簡單的組件，它接受一些props並為無效的 state 呈現一個簡單的<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);