React JS 的单元测试

Question

我有一个按钮组件..

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

这是我的单元测试用例.. None 我的测试用例通过了.. 我已经参考了我的其他资源但无能为力。我是新手..请帮我解决这个问题..

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

这是我遇到的错误

Answer 1

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

这是 environments

上的信息

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

React JS 的单元测试

Unit testing for React JS

javascript

unit-testing

reactjs

react-testing-library