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,
      })
    })
  • 相关阅读:
    jsp页面input输入框限制输入内容
    sql计算两个日期之间的相差天数
    sql根据一个字段日期加减7天存入另一字段中
    ajax请求捕获异常
    跨网段和局域网的SQL SERVER发布订阅配置图解和常见问题
    一次得到多个数据集
    SQL Server 2008语句大全完整版
    关于已开票已收款未发货的账务处理
    高格-一些特点话题【7】
    高格-塑料管业中厂内工单,满足随时换料的处理【6】
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10403911.html
Copyright © 2011-2022 走看看