6

我在测试React使用react-loadable. 比如说，我有一个Button组件，根据它是否接收到一个icon道具，它会像这样加载一个Icon组件：

按钮.js

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还没有加载，而是测试只找到<div>Loading...</div>元素......

Button.test.js

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()
  })
})

有没有一种优雅的方法可以在不使用实际setTimeouts 的情况下处理这种情况？

4

2 回答 2

2

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

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

另外，请注意async需要与await.

于 2018-08-24T14:17:28.257 回答
1

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

为了让 Jest 使用“可加载”/“异步”组件，我必须.babel-rc为 Jest 配置我的配置以包含动态导入节点babel 插件，这样即使导入是异步的，模块也可以正确解析。

于 2018-08-20T19:25:46.483 回答