[英]Check that button is disabled in react-testing-library
I have a React component that generates a button, which content contains <span>
element like this one:我有一个生成按钮的 React 组件,其中的内容包含
<span>
元素,如下所示:
function Click(props) {
return (
<button disable={props.disable}>
<span>Click me</span>
</button>
);
}
I want to test the logic of this component with the use of react-testing-library
and mocha
+ chai
.我想使用
react-testing-library
和mocha
+ chai
来测试这个组件的逻辑。
The problem which I stuck at the moment is that getByText("Click me")
selector return the <span>
DOM node, but for the tests, I need to check disable
attribute of the <button>
node.我目前
getByText("Click me")
的问题是getByText("Click me")
选择器返回<span>
DOM 节点,但对于测试,我需要检查<button>
节点的disable
属性。 What is the best practice handling such test cases?处理此类测试用例的最佳实践是什么? I see a couple of solutions, but all of them sounds a little bit off:
我看到了几个解决方案,但所有这些听起来都有点不对劲:
data-test-id
for <button>
element<button>
元素使用data-test-id
<Click />
component and then select the button within(...)
this scope<Click />
组件的祖先之一,然后选择within(...)
此范围within(...)
的按钮fireEvent
and check that nothing is happenedfireEvent
的选定元素并检查是否没有发生任何事情Can you suggest a better approach?你能提出更好的方法吗?
Assert if button is disabled断言按钮是否被禁用
You can use the toHaveAttribute
and closest
to test it.您可以使用
toHaveAttribute
和closest
来测试它。
import { render } from '@testing-library/react';
const { getByText } = render(Click);
expect(getByText(/Click me/i).closest('button')).toHaveAttribute('disabled');
or toBeDisabled
或
toBeDisabled
expect(getByText(/Click me/i).closest('button')).toBeDisabled();
Assert if button is enabled断言按钮是否启用
To check if the button is enabled, use not
as follows要检查按钮是否启用,请使用
not
如下
expect(getByText(/Click me/i).closest('button')).not.toBeDisabled();
You can use toBeDisabled()
from @testing-library/jest-dom
, it is a custom jest matcher to test the state of the DOM:您可以使用
@testing-library/jest-dom
toBeDisabled()
,它是一个自定义的笑话匹配器来测试 DOM 的状态:
https://github.com/testing-library/jest-dom https://github.com/testing-library/jest-dom
Example:例子:
<button>Submit</button>
expect(getByText(/submit/i)).toBeDisabled()
For someone who looking for the test which is the button is not disabled .对于寻找测试的人来说,按钮没有被禁用。
import { render } from '@testing-library/react';
const { getByText } = render(Click);
expect(getByText(/Click me/i).getAttribute("disabled")).toBe(null)
You can test the disable prop of the button just by using @testing-library/react
as follows.您可以使用
@testing-library/react
按钮的禁用属性,如下所示。
example:例子:
import { render } from '@testing-library/react';
const {getByText} = render(<Click/>)
expect(getByText('Click me').closest('button').disabled).toBeTruthy()
I would politely argue you are testing an implementation detail, which react-testing-library discourages.我会礼貌地争辩说您正在测试一个实现细节,而 react-testing-library 不鼓励这样做。
The more your tests resemble the way your software is used, the more confidence they can give you.
您的测试与您的软件使用方式越相似,它们就可以给您越多的信心。
If a button is disabled, a user doesn't see a disabled prop, instead they see nothing happen.如果按钮被禁用,用户不会看到禁用的道具,而是看不到任何事情发生。 If a button is enabled, a user doesn't see the omission of a disabled prop, instead they see something happen.
如果按钮被启用,用户不会看到被禁用的道具的遗漏,而是会看到一些事情发生。
I believe you should be testing for this instead:我相信您应该对此进行测试:
const Button = (props) => (
<button
type="submit"
onClick={props.onClick}
disabled={props.disabled}
>
Click me
</button>
);
describe('Button', () => {
it('will call onClick when enabled', () => {
const onClick = jest.fn();
render(<Button onClick={onClick} disabled={false} />);
userEvent.click(getByRole('button', /click me/i));
expect(onClick).toHaveBeenCalledTimes(1);
});
it('will not call onClick when disabled', () => {
const onClick = jest.fn();
render(<Button onClick={onClick} disabled={true} />);
userEvent.click(getByRole('button', /click me/i));
expect(onClick).not.toHaveBeenCalled();
});
})
Another way to fix this would be to grab by the role and check the innerHTML like,解决此问题的另一种方法是按角色抓取并检查innerHTML,例如,
const { getByRole } = render(<Click />)
const button = getByRole('button')
// will make sure the 'Click me' text is in there somewhere
expect(button.innerHTML).toMatch(/Click me/))
This isn't the best solution for your specific case, but it's one to keep in your back pocket if you have to deal with a button component that's not an actual button, eg,这不是针对您的特定情况的最佳解决方案,但如果您必须处理不是实际按钮的按钮组件,则可以将其放在后袋中,例如,
<div role="button"><span>Click Me</span></div>
toHaveAttribute is good option in using attribute. toHaveAttribute是使用属性的好选择。
<button data-testid="ok-button" type="submit" disabled>ok</button>
const button = getByTestId('ok-button')
//const button = getByRole('button');
expect(button).toHaveAttribute('disabled')
expect(button).toHaveAttribute('type', 'submit')
expect(button).not.toHaveAttribute('type', 'button')
expect(button).toHaveAttribute('type', expect.stringContaining('sub'))
expect(button).toHaveAttribute('type', expect.not.stringContaining('but'))
Hope this will be helpful.希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.