中文环境下可以将标题改为“使用waitFor进行异步Storybook测试”,同时在文章中给出详细的代码示例,以便读者清晰地了解代码实现的过程。以下是一个可能的代码示例:
import { render, screen, waitFor } from '@testing-library/react'
import { storiesOf } from '@storybook/react'
import MyComponent from './MyComponent'
storiesOf('MyComponent', module)
.add('default', () => )
describe('MyComponent', () => {
it('should render properly', async () => {
render( )
await waitFor(() => screen.getByText('Hello world'))
expect(screen.getByText('Hello world')).toBeInTheDocument()
})
})
在上面的代码示例中,我们首先使用Storybook的storiesOf函数定义了一个名为“MyComponent”的组件,并添加了一个名为“default”的story。随后,在测试用例中,我们使用render函数将MyComponent渲染出来,并使用waitFor函数等待“Hello world”这个文本出现在页面上。当文本成功出现后,我们就可以使用react-testing-library提供的getByText函数来获取这个文本并进行断言。