代码之家  ›  专栏  ›  技术社区  ›  artooras

测试可反应加载组件

  •  3
  • artooras  · 技术社区  · 6 年前

    React 使用的组件 react-loadable . 说,我有一个 Button icon 道具,装载 Icon

    Button.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>
      )
    }
    

    但是,当我测试这个组件时 尚未加载,而测试只找到 <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()
      })
    }) 
    

    有没有一种优雅的方法来处理这种情况而不使用实际的 setTimeout s?

    2 回复  |  直到 6 年前
        1
  •  1
  •   Christian Todd    6 年前

    我没有使用react可加载的个人经验,但是我实现了一个类似的组件,它通过 import() 语法。

    .babel-rc Jest的配置包括 dynamic-import-node babel插件,这样即使导入是异步的,模块也可以正确解析。

        2
  •  1
  •   artooras    6 年前

    所以,答案是阅读文档- 自我注意 ! 解决方案基于 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 .

    推荐文章