React JS 的单元测试答案

【问题标题】：Unit testing for React JSReact JS 的单元测试
【发布时间】：2024-07-15 09:30:01
【问题描述】：

我有一个按钮组件..

export default class ButtonAction extends Component {

  render() {

    const { id, disabled, onClose, onSave, onRemove, isDelete } = this.props;

    return (

      <div className="footer">
        <div className="button-container">
          <button data-testid="cancel" onClick={() => onClose()}> Cancel </button>
          {
            isDelete
              ? <button data-testid="remove" disabled={!disabled} onClick={() => onRemove()} className='primary'> Yes </button>
              : <button data-testid="save" disabled={!disabled} onClick={() => onSave()} className={disabled ? 'primary' : 'disabled'}> { id ? 'Update' : 'Save' } </button>
          }
        </div>
      </div>
    )
  }
}

这就是我制作组件的方式。我正在尝试进行单元测试，但测试用例没有通过..

test("id exists", () => {
  const { getByTestId } = render(<ButtonAction id={''} isDelete={false} />);
  expect(getByTestId('cancel')).toBeTruthy();
});

test("delete button exists", () => {
  const { getByTestId } = render(<ButtonAction id={'remove'} isDelete={true} />);

  expect(getByTestId('cancel').textContent).toBe(' Yes ')
});

test('save button exists', () => {
  const { getByTestId } = render(<ButtonAction id={''} isDelete={false} />)

  expect(getByTestId('save').textContent).toBe(' Save ')
})

test('calling render with the same component on the same container does not remount', () => {
  const { getByTestId } = render(<ButtonAction id={'1'} isDelete={false} />)

  expect(getByTestId('save').textContent).toBe(' Update ')
})

这是我的单元测试用例..我的测试用例都没有通过..我已经参考了我的其他来源，但无能为力。我是新来的反应..请帮我解决这个问题..

The error below may be caused by using the wrong test environment, see jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment. ReferenceError: document is not defined

这是我遇到的错误

【问题讨论】：

第一个测试用例失败了吗？错误信息是什么
失败消息是什么？
下面的错误可能是使用了错误的测试环境导致的，见jestjs.io/docs/configuration#testenvironment-string。考虑使用“jsdom”测试环境。 ReferenceError: document is not defined 这是我得到的错误

标签： javascript reactjs unit-testing react-testing-library

【解决方案1】：

错误告诉你单元测试环境不是jsdom。您必须检查是否使用任何全局设置将测试环境设置为node，在这种情况下，您的单元测试将无法运行 DOM。

这是environments上的信息

您可以尝试按照测试文件顶部的建议设置文档块，看看它是否有效。

【讨论】：