英文:
Ho do I use a query getByTestId from react-testing-library properly?
问题
I need my SideBar component to pass the test with getByTestId query.
我的SideBar组件需要通过getByTestId查询来通过测试。
You can try adding the data-testid attribute to a different element within your SideBar component, such as the button element, to ensure that there is an element with the specified data-testid attribute to be found by the test. Here's an updated version of your SideBar component with the data-testid attribute added to the button:
你可以尝试将data-testid属性添加到SideBar组件中的不同元素，例如按钮元素，以确保存在具有指定data-testid属性的元素可以被测试找到。以下是更新后的SideBar组件版本，其中将data-testid属性添加到按钮上：
export const SideBar: FC<SideBarPropsInterface> = ({ className }) => {
const [collapsed, setCollapsed] = useState(false)
const handleToggle = (): void => {
setCollapsed((prev) => !prev)
}
const classNameChecked = className ?? ''
return (
<div
className={classNames(
styles.sideBar,
{ [styles.collapsed]: collapsed },
[classNameChecked]
)}
>
<button data-testid="sidebar-toggle" onClick={handleToggle}>toggle</button>
<div className={styles.switchers}>
<ThemeSwitcher />
<LangSwitcher />
</div>
</div>
)
}
And in your test, update the getByTestId query to match the new data-testid attribute value:
在你的测试中，更新getByTestId查询以匹配新的data-testid属性值：
describe('SideBar', () => {
test('render', () => {
render(<SideBar/>)
screen.debug()
expect(screen.getByTestId('sidebar-toggle')).toBeInTheDocument()
})
})
By adding the data-testid attribute to the button element, you ensure that there is an element with the specified data-testid attribute that can be found during testing. This should help your SideBar component pass the test with getByTestId query.
英文:
I'm trying to test my components with react-testing library.
Some of my components are good with getByTestId query but others aren't.
Examlpe:
SideBar component code
export const SideBar: FC<SideBarPropsInterface> = ({ className }) => {
const [collapsed, setCollapsed] = useState(false)
const handleToggle = (): void => {
setCollapsed((prev) => !prev)
}
const classNameChecked = className ?? ''
return (
<div
data-testid="sidebar"
className={classNames(
styles.sideBar,
{ [styles.collapsed]: collapsed },
[classNameChecked]
)}
>
<button onClick={handleToggle}>toggle</button>
<div className={styles.switchers}>
<ThemeSwitcher />
<LangSwitcher />
</div>
</div>
)
}
Test for SideBar
describe('SideBar', () => {
test('render', () => {
render(<SideBar/>)
screen.debug()
expect(screen.getByTestId('sidebar')).toBeInTheDocument()
})
})
Error
TestingLibraryElementError: Unable to find an element by: [data-testid="sidebar"]
Ignored nodes: comments, script, style
<body>
<div />
</body>
As you can see test renders just div without attributes.
But my other components are good with it. Like Button component
Button component code
export const Button: FC<ButtonPropsInterface> = ({
children,
className,
theme,
...otherProps
}) => {
const classNameChecked = className ?? ''
return (
<button
data-testid="special"
className={classNames(styles.button, {}, [
classNameChecked,
styles[theme as ThemeButton]
])}
{...otherProps}
>
{children}
</button>
)
}
Test for Button
describe('Button', () => {
test('render', () => {
render(<Button>test</Button>)
screen.debug()
expect(screen.getByTestId('special')).toBeInTheDocument()
})
})
Passed(screen.debug)
console.log
<body>
<div>
<button
class="button undefined"
data-testid="special"
>
test
</button>
</div>
</body>
Question: what am I doing wrong? I need my SideBar component to pass the test with getByTestId query
答案1
得分: 0
Ok. 我找到了一个解决方案。如果您在父组件内有子组件，您需要手动模拟它们。
在我的情况下，我在<SideBar/>内有<LangSwitcher/>和<ThemeSwitchers/>。
RTL 在我模拟之前看不到它们：
jest.mock("widgets/LangSwitcher")
jest.mock("widgets/ThemeSwitcher")
describe('SideBar', () => {
test('render', () => {
render(<SideBar/>)
screen.debug()
expect(screen.getByTestId('sidebar')).toBeInTheDocument()
})
})
英文:
Ok. I found a solution. If you have child components inside your parent component, you need to mock them manually.
In my case I have <LangSwitcher/> and <ThemeSwitchers/> inside <SideBar/>
RTL doesn't see them until I mock
jest.mock("widgets/LangSwitcher")
jest.mock("widgets/ThemeSwitcher")
describe('SideBar', () => {
test('render', () => {
render(<SideBar/>)
screen.debug()
expect(screen.getByTestId('sidebar')).toBeInTheDocument()
})
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论