zoukankan      html  css  js  c++  java
  • [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library

    Thanks to react-testing-library our tests are free of implementation details, so when we refactor components to hooks we generally don't need to make any changes to our tests. However, useEffectis slightly different from componentDidMount in that it's actually executed asynchronously after the render has taken place. So all of our query tests which relied on the HTTP requests being sent immediately after render are failing. Let's use the flushEffects utility from react-testing-library to ensure that the pending effect callbacks are run before we make assertions.

    Component code:

    import {useContext, useReducer, useEffect} from 'react'
    import * as GitHub from '../../../github-client'
    
    function Query ({query, variables, children, normalize = data => data}) {
      const client = useContext(GitHub.Context)
      const defaultState = {loaded: false, fetching: false, data: null, error: null}
      const [state, setState] = useReducer(
        (state, newState) => ({...state, ...newState}),
        defaultState)
      useEffect(() => {
        setState({fetching: true})
        client
          .request(query, variables)
          .then(res =>
            setState({
              data: normalize(res),
              error: null,
              loaded: true,
              fetching: false,
            }),
          )
          .catch(error =>
            setState({
              error,
              data: null,
              loaded: false,
              fetching: false,
            }),
          )
      }, [query, variables]) // trigger the effects when 'query' or 'variables' changes
      return children(state)
    }
    
    export default Query

    Test Code:

    import {render as rtlRender, wait, flushEffects} from 'react-testing-library'
    import React from 'react'
    import {render as rtlRender, wait, flushEffects} from 'react-testing-library'
    import * as GitHubClient from '../../../../github-client'
    import Query from '../query'
    
    const fakeResponse = {fakeData: {}}
    const fakeClient = {request: jest.fn(() => Promise.resolve(fakeResponse))}
    
    beforeEach(() => {
      fakeClient.request.mockClear()
    })
    
    function renderQuery({
      client = fakeClient,
      children = jest.fn(() => null),
      query = '',
      variables = {},
      normalize,
      ...options
    } = {}) {
      const props = {query, variables, children, normalize}
      const utils = rtlRender(
        <GitHubClient.Provider client={client}>
          <Query {...props} />
        </GitHubClient.Provider>,
        options,
      )
      return {
        ...utils,
        rerender: options =>
          renderQuery({
            container: utils.container,
            children,
            query,
            variables,
            normalize,
            ...options,
          }),
        client,
        query,
        variables,
        children,
      }
    }
    
    test('query makes requests to the client on mount', async () => {
      const {children, client, variables, query} = renderQuery()
      flushEffects();
      expect(children).toHaveBeenCalledTimes(2)
      expect(children).toHaveBeenCalledWith({
        data: null,
        error: null,
        fetching: true,
        loaded: false,
      })
      expect(client.request).toHaveBeenCalledTimes(1)
      expect(client.request).toHaveBeenCalledWith(query, variables)
    
      children.mockClear()
      await wait()
    
      expect(children).toHaveBeenCalledTimes(1)
      expect(children).toHaveBeenCalledWith({
        data: fakeResponse,
        error: null,
        fetching: false,
        loaded: true,
      })
    })
    
    test('does not request if rerendered and nothing changed', async () => {
      const {children, client, rerender} = renderQuery()
      flushEffects();
      await wait()
      children.mockClear()
      client.request.mockClear()
      rerender()
      flushEffects();
      await wait()
      expect(client.request).toHaveBeenCalledTimes(0)
      expect(children).toHaveBeenCalledTimes(1) // does still re-render children.
    })
    
    test('makes request if rerendered with new variables', async () => {
      const {client, query, rerender} = renderQuery({
        variables: {username: 'fred'},
      })
      flushEffects();
      await wait()
      client.request.mockClear()
      const newVariables = {username: 'george'}
      rerender({variables: newVariables})
      flushEffects();
      await wait()
      expect(client.request).toHaveBeenCalledTimes(1)
      expect(client.request).toHaveBeenCalledWith(query, newVariables)
    })
    
    test('makes request if rerendered with new query', async () => {
      const {client, variables, rerender} = renderQuery({
        query: `query neat() {}`,
      })
      flushEffects();
      await wait()
      client.request.mockClear()
      const newQuery = `query nice() {}`
      rerender({query: newQuery})
      flushEffects();
      await wait()
      expect(client.request).toHaveBeenCalledTimes(1)
      expect(client.request).toHaveBeenCalledWith(newQuery, variables)
    })
    
    test('normalize allows modifying data', async () => {
      const normalize = data => ({normalizedData: data})
      const {children} = renderQuery({normalize})
      flushEffects();
      await wait()
      expect(children).toHaveBeenCalledWith({
        data: {normalizedData: fakeResponse},
        error: null,
        fetching: false,
        loaded: true,
      })
    })
  • 相关阅读:
    查看详细linux系统信息的命令和方法
    linux下将当前目录下的文件名存到一个文本文件里
    详解linux下批量替换文件内容的三种方法(perl,sed,shell)
    将二维数组中某个值为空的数组进行删除!
    字符串截取,对数字,英文,汉字都可以
    根据二维数组的某列数值来对二维数组进行排序
    iOS开发之第三方分享QQ分享,史上最新最全第三方分享QQ方式实现
    iOS开发之第三方登录微博-- 史上最全最新第三方登录微博方式实现
    iOS开发之第三方登录微信-- 史上最全最新第三方登录微信方式实现
    iOS开发之第三方登录QQ -- 史上最全最新第三方登录QQ方式实现
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10403911.html
Copyright © 2011-2022 走看看