最简单的方式的，其实是用test ID，没有任何限制，因为这个ID是我们指定用来测试的，所以跟业务没有什么关系，也不需要考虑按钮显示文字发生变化。
测试用例，主要要用queryByTestId，而不是getByTestId，如果用了后者，没有找到这个元素的时候会抛出异常。
it('should have increase button', () => {
const { queryByTestId } = render(<App />);
const button = queryByTestId('increase-button');
expect(button).toBeInTheDocument();
})
通过验证的代码
<button data-testid="increase-button">+1</button>
另外一种方式，可以用queryByRole，对于button元素来说，不需要显性设置，他的role就是button，这时候可能还需要搭配其他的属性，比如我们用aria-label
it('should have increase button', () => {
const { queryByRole } = render(<App />);
const button = queryByRole('button', { name: 'increase-button' });
expect(button).toBeInTheDocument();
})
通过验证的代码
<button aria-label="increase-button">+1</button>
如果我们要进一步验证，可以测试查询到元素的类型和内容
expect(button.nodeName).toBe('BUTTON');
expect(button.textContent).toBe('+1');
Top comments (0)