Question

我在测试使用React的{{1}}组件时遇到麻烦。假设我有一个react-loadable组件，具体取决于它是否接收到Button道具，它像这样加载icon组件：

Button.js

Icon

但是，当我测试此组件时，const LoadableIcon = Loadable({ loader: () => import('./Icon'), loading: () => <div>Loading...</div> }) function Button(props) { return ( <button onClick={props.onClick}> {props.icon && <LoadableIcon name={props.icon} />} {props.children} </button> ) }尚未加载，而测试仅找到了Icon元素...

Button.test.js

<div>Loading...</div>

是否有一种不使用实际的import React from 'react' import {render} from 'react-testing-library' import Button from '../Button' describe('Button', () => { it('renders icon correctly', () => { const {getByText} = render( <Button icon='add' /> ) expect(getByText('add')).toBeInTheDocument() }) })的优雅方式来处理这种情况？

Answer 1

我没有使用react-loadable的经验，但是我实现了类似的组件，该组件通过动态import()语法处理代码拆分。

要让Jest使用'loadable'/'async'组件，我必须为Jest配置.babel-rc配置，使其包含dynamic-import-node babel插件，这样，即使是正确解析的模块，导入异步时。

Answer 2

因此，答案是阅读文档-自我注释！基于docs的解决方案如下：

describe('Button', () => {
  it('renders icon correctly', async () => {
    const {getByText} = render(
      <Button 
        icon='add' 
      />
    )
    const icon = await waitForElement(() => getByText('add'))
    expect(icon).toBeInTheDocument()
  })
})

另外，请注意，async必须与await一起使用。

测试可加载的组件

2 个答案: