[JavaScript知识库]jest react测试

一般组件测试都是用jest，testing-library/react
@testing-library/react : 以用户为中心的方式测试 UI 组件。
@testing-library/jest-dom 好用的自定义 jest 匹配器来测试 DOM 的状态
@testing-library/react-hooks 测试react hook
@testing-library/user-event 测试交互事件
工具：用eslint-plugin-testing-library检测测试代码语法，在 VS Code 中，我们也可以安装插件：Jest Runner。

一般会在src新建一个__test__目录，(以Ashow.js为例)新建一个比如AShow.test.js
平时的前端测试一般都是用这些方法完成前端单元测试

方法测试

function sum(a, b) {
  return a + b;
}
-----
test('测试sum方法：10 + 20 = 30', () => {
  expect(sum(10, 10)).toBe(30);
})

异步测试

const fetchData = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve({ success: true });
    }, 2000);
  });
-----
test("fetchData 返回结果为{success: true}", () => {
  expect(fetchData()).resolves.toMatchObject({
    success: true,
  });
  expect(fetchData()).rejects.toThrow()
});	
---或者
test("fetchData 返回结果为{success: true}", async () => {
  try {
    const data = await fetchData();
    expect(data).toEqual({
      success: true,
    });
  } catch (err) {
    // 抛出异常
    expect(err).toThrow()
  }
});

组件Ashow

function Ashow({ data }) {
  return <h1>{data}</h1>
}
export default Ashow;

测试组件渲染

test("test-dom-render", () => {
  const root = document.createElement("div");
  ReactDOM.render(<AShow data={'ashow'}/>, root);
  expect(root.querySelector("h1").textContent).toBe("ashow");
})

快速查看快照生成的json

test('test-snapshoot-json', () => {
  render(<AShow 
    data= {'ashow1'}
  ></AShow>);
  screen.debug();
});

快照测试json对比，根据相同的mock数据前后两次生成的json进行一个对比。

import renderer from 'react-test-renderer';
test('test-snapshoot-json-diff', () => {
  const tree = renderer.create(<Ashow 
    data= {'ashow-1'}
  ></Ashow>)
    .toJSON();
  expect(tree).toMatchSnapshot();
}

fireEvent函数来模拟终端用户的交互

test('test-click', () => {
  const callback = jest.fn();
  const wrapper =render(<AShow 
    data= {'ashow1'}
    onClick={callback}
  ></AShow>);
  const el = wrapper.getByText('ashow1')
  fireEvent.click(el)
  expect(callback).toHaveBeenCalled()
});

测试异步代码

自定义hooks测试

---写自定义一个hooks    useUndo
import * as React from 'react'
const UNDO = 'UNDO'
const REDO = 'REDO'
const SET = 'SET'
const RESET = 'RESET'
function undoReducer(state, action) {
  const {past, present, future} = state
  const {type, newPresent} = action
  switch (action.type) {
    case UNDO: {
      if (past.length === 0) return state

      const previous = past[past.length - 1]
      const newPast = past.slice(0, past.length - 1)

      return {
        past: newPast,
        present: previous,
        future: [present, ...future],
      }
    }
    case REDO: {
      if (future.length === 0) return state
      const next = future[0]
      const newFuture = future.slice(1)
      return {
        past: [...past, present],
        present: next,
        future: newFuture,
      }
    }
    case SET: {
      if (newPresent === present) return state
      return {
        past: [...past, present],
        present: newPresent,
        future: [],
      }
    }
    case RESET: {
      return {
        past: [],
        present: newPresent,
        future: [],
      }
    }
    default: {
      throw new Error(`Unhandled action type: ${type}`)
    }
  }
}
function useUndo(initialPresent) {
  const [state, dispatch] = React.useReducer(undoReducer, {
    past: [],
    present: initialPresent,
    future: [],
  })
  const canUndo = state.past.length !== 0
  const canRedo = state.future.length !== 0
  const undo = React.useCallback(() => dispatch({type: UNDO}), [])
  const redo = React.useCallback(() => dispatch({type: REDO}), [])
  const set = React.useCallback(
    newPresent => dispatch({type: SET, newPresent}),
    [],
  )
  const reset = React.useCallback(
    newPresent => dispatch({type: RESET, newPresent}),
    [],
  )
  return {...state, set, reset, undo, redo, canUndo, canRedo}
}
export default useUndo

---renderHook编写useUndo测试用例
import {renderHook, act} from '@testing-library/react-hooks'
import useUndo from '../use-undo'

test('allows you to undo and redo', () => {
  const {result} = renderHook(() => useUndo('one'))
  // assert initial state
  expect(result.current.canUndo).toBe(false)
  expect(result.current.canRedo).toBe(false)
  expect(result.current.past).toEqual([])
  expect(result.current.present).toEqual('one')
  expect(result.current.future).toEqual([])
  // add second value
  act(() => {
    result.current.set('two')
  })
  // assert new state
  expect(result.current.canUndo).toBe(true)
  expect(result.current.canRedo).toBe(false)
  expect(result.current.past).toEqual(['one'])
  expect(result.current.present).toEqual('two')
  expect(result.current.future).toEqual([])
  // add third value
  act(() => {
    result.current.set('three')
  })
  // assert new state
  expect(result.current.canUndo).toBe(true)
  expect(result.current.canRedo).toBe(false)
  expect(result.current.past).toEqual(['one', 'two'])
  expect(result.current.present).toEqual('three')
  expect(result.current.future).toEqual([])
  // undo
  act(() => {
    result.current.undo()
  })
  // assert "undone" state
  expect(result.current.canUndo).toBe(true)
  expect(result.current.canRedo).toBe(true)
  expect(result.current.past).toEqual(['one'])
  expect(result.current.present).toEqual('two')
  expect(result.current.future).toEqual(['three'])

  // undo again
  act(() => {
    result.current.undo()
  })

  // assert "double-undone" state
  expect(result.current.canUndo).toBe(false)
  expect(result.current.canRedo).toBe(true)
  expect(result.current.past).toEqual([])
  expect(result.current.present).toEqual('one')
  expect(result.current.future).toEqual(['two', 'three'])
  // redo
  act(() => {
    result.current.redo()
  })
  // assert undo + undo + redo state
  expect(result.current.canUndo).toBe(true)
  expect(result.current.canRedo).toBe(true)
  expect(result.current.past).toEqual(['one'])
  expect(result.current.present).toEqual('two')
  expect(result.current.future).toEqual(['three'])
  // add fourth value
  act(() => {
    result.current.set('four')
  })
  // assert final state (note the lack of "third")
  expect(result.current.canUndo).toBe(true)
  expect(result.current.canRedo).toBe(false)
  expect(result.current.past).toEqual(['one', 'two'])
  expect(result.current.present).toEqual('four')
  expect(result.current.future).toEqual([])
})

断言方法

toBeDisabled
toBeEnabled
toBeEmpty
toBeEmptyDOMElement
toBeInTheDocument：和toBeNull检查元素是否存在（和）
toBeInvalid
toBeRequired
toBeValid
toBeVisible
toContainElement
toContainHTML
toHaveAttribute
toHaveClass
toHaveFocus
toHaveFormValues
toHaveStyle
toHaveTextContent
toHaveValue
toHaveDisplayValue
toBeChecked
toBePartiallyChecked
toHaveDescription

搜索类型方法

getByText：<button>Add</button> ，判断是否存在getByText(‘Add’)
getByRole：函数通常用于通过aria-label属性检索元素 <button type=“button” >
getByLabelText ：<label for=“search” />
getByPlaceholderText： <input placeholder=“Search” />
getByAltText：<img alt=“profile” />
getByDisplayValue：<input value=“JavaScript” />