前端单元测试实战：React + Redux Testing Library | 吕立青的博客

PPT 内容: https://jimmylv.gitee.io/slides/react-test

走 🚶 vs 🏃 跑

写不好是能力问题，不写则是态度问题。

单元测试的上下文

缩短反馈周期

单元测试的意义

• 如果你说我的业务部门不需要频繁上线，并且我有足够的人力来覆盖手工测试，那你可以不用单元测试

• 如果你说我不在意代码腐化，并且我也不做重构，那你可以不用单元测试

• 如果你说我不在意代码质量，好几个没有测试保护的 if-else 裸奔也不在话下，脑不好还做什么程序员，那你可以不用单元测试

• 如果你说我确有快速部署的需求，但我们不 care 质量问题，出回归问题就修，那你可以不用单元测试

单元测试与自动化的关系

测试框架 - Jest

• Fast 天下武功，唯快不破。

• Opinionated 开箱即用。

• Watch Mode 守护模式。

• Snapshot Testing 快照测试。

第一个 Jest 实例

mkdir jest-demo && cd \$_
yarn init -y #--yes yarn add jest -D #--de

一个简单的纯函数

const  sum  =  (a,  b)  =>  a  +  b  module.exports  =  {  sum  }

麻雀虽小五脏俱全

const  {  sum  }  =  require('./math')  describe('Math module',  ()  =>  {  test('should return sum result when one number plus another number',  ()  =>  {  // Given  const  number  =  1  const  anotherNumber  =  2  // When  const  result  =  sum(number,  anotherNumber)  // Then  expect(result).toBe(2)  })  })

Given/When/Then 的套路

expect(1  +  1).toBe(2)  expect(1  +  1).not.toBe(3)

• Database 数据库

• Network requests 网络请求

• access to Files 存取文件

• any External system 任何外部系统

Mock 用于替代整个模块

import  SoundPlayer  from  './sound-player'  const  mockPlaySoundFile  =  jest.fn()  jest.mock('./sound-player',  ()  =>  {  return  jest.fn().mockImplementation(()  =>  {  return  {  playSoundFile:  mockPlaySoundFile  }  })  })

Stub 用于模拟特定行为

const  mockFn  =  jest.fn()  mockFn()  expect(mockFn).toHaveBeenCalled()  // With a mock implementation:  const  returnsTrue  =  jest.fn(()  =>  true)  console.log(returnsTrue())  // true;

Spy 用于监听模块行为

Spy packages without affecting the functions code

const  video  =  require('./video')  it('plays video',  ()  =>  {  const  spy  =  jest.spyOn(video,  'play')  const  isPlaying  =  video.play()  expect(spy).toHaveBeenCalled()  expect(isPlaying).toBe(true)  })

如何 Mock 全局的方法？

window.matchMedia  =  jest.fn().mockImplementation((query)  =>  {  return  {  matches:  false,  media:  query,  onchange:  null,  addListener:  jest.fn(),  removeListener:  jest.fn(),  }  })

代码模块的易测性

navigator.geolocation.getCurrentPostion()  // chrome API 异步获取当前位置

Callback 回调函数

it('the data is peanut butter',  (done)  =>  {  function  callback(data)  {  expect(data).toBe('peanut butter')  done()  }  fetchData(callback)  })

Promise 让爱 then() 到底

it('the data is peanut butter',  ()  =>  {  expect.assertions(1)  return  fetchData().then((data)  =>  {  expect(data).toBe('peanut butter')  })  })  expect(Promise.resolve('lemon')).resolves.toBe('lemon')  expect(Promise.reject(new  Error('octopus'))).rejects.toThrow('octopus')

Async/Await 让异步变得同步

test('the data is peanut butter',  async  ()  =>  {  // given  const  params  =  {}  // when  const  data  =  await  fetchData(params)  // then  expect(data).toBe('peanut butter')  })

组件化与 UI 测试

React 组件树的测试

测试金字塔

为了维持金字塔形状，一个健康、快速、可维护的测试组合应该是这样的：写许多小而快的单元测试。适当写一些更粗粒度的测试，写很少高层次的端到端测试。注意不要让你的测试变成冰淇淋那样子，这对维护来说将是一个噩梦，并且跑一遍也需要太多时间。（via 测试金字塔实战 – ThoughtWorks 洞见）](https://insights.thoughtworks.cn/practical-test-pyramid/)

UI 测试策略

• 编写不同粒度的测试

• 层次越高，你写的测试应该越少

❌ 浅渲染 shallowMount(component[, options]) => Wrapper

import  {  shallow  }  from  'enzyme'  describe('Enzyme Shallow',  ()  =>  {  it('App should have three <Todo /> components',  ()  =>  {  const  app  =  shallow(<App  />)  expect(app.find('Todo')).to.have.length(3)  })  })

全量渲染 mount(component[, options]) => Wrapper

import  {  mount  }  from  'enzyme'  describe('Enzyme Mount',  ()  =>  {  it('should delete Todo when click button',  ()  =>  {  const  app  =  mount(<App  />)  const  todoLength  =  app.find('li').length  app.find('button.delete').at(0).simulate('click')  expect(app.find('li').length).to.equal(todoLength  -  1)  })  })

Testing Library vs Enzyme

import  {  screen,  render  }  from  '@testing-library/react'  test('should show h1 title',  ()  =>  {  // given  render(<App  />)  // when  const  result  =  screen.getByTestId('title').textContent  // then  expect(result).toBe('Edmodo')  })

Which query should I use?

UI 交互行为的测试

❌ Enzyme .find() 方法

it('simulates click events',  ()  =>  {  // given  const  onButtonClick  =  sinon.spy()  const  wrapper  =  shallow(<Foo  onButtonClick={onButtonClick}  />)   // when  wrapper.find('button').simulate('click')  // then  expect(onButtonClick.calledOnce).to.be.true  })

✅ Testing Library userEvent

import  {  render,  screen  }  from  '@testing-library/react'  import  userEvent  from  '@testing-library/user-event'  test('should calculate result by input number',  ()  =>  {  render(<App  />)  userEvent.type(screen.getByPlaceholderText(/Please input your number/i),  15)  expect(wrapper.getByTestId('number-result').textContent).toBe('FizzBuzz')  })

Redux 的前车之鉴

Redux 是一个专为 React.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

MVC 与 Flux 架构

CQRS 与 Flux 架构

CQRS 命令 - 查询职责分离

1. 如果一个方法修改了这个对象的状态，那就是一个 command（命令），并且一定不能返回值。

2. 如果一个方法返回了一些值，那就是一个 query（查询），并且一定不能修改状态。

Redux 三大原则：强制遵守一定的规则

1. 单一数据源

2. State 是只读的

3. 使用纯函数来执行修改

reducers 测试

import  reducers  from  './reducers'  import  actions  from  './actions'  test(`
  should merge user comments and remove duplicated comments by comment id
  when action saveUserComments is dispatched with new fetched comments
`,  ()  =>  {  const  state  =  {  comments:  [{  id:  1,  content:  'comments-1'  }],  }  const  comments  =  [  {  id:  1,  content:  'comments-1'  },  {  id:  2,  content:  'comments-2'  },  ]  const  expected  =  {  comments:  [  {  id:  1,  content:  'comments-1'  },  {  id:  2,  content:  'comments-2'  },  ],  }  const  result  =  reducers(state,  actions.saveUserComments(comments))  expect(result).toEqual(expected)  })

actions 测试

import  *  as  actions  from  './actions'  test('should dispatch saveUserComments action with fetched user comments',  ()  =>  {  const  comments  =  []  const  expected  =  {  type:  'saveUserComments',  payload:  {  comments:  [],  },  }  const  result  =  actions.saveUserComments(comments)  expect(result).toEqual(expected)  })

异步 Action 测试

// product.test.js  jest.mock('../api/book',  ()  =>  ({  getBookList:  jest.fn(()  =>  {  data:  [{  name:  '你不知道的JavaScript'  }]  }),  }))  test('should fetch book list',  async  ()  =>  {  const  payload  =  {  category:  '文学'  }  const  {  storeState  }  =  await  expectSaga(sagas).withReducer(reducer).dispatch({  type:  types.FETCH,  payload  }).run()  expect(service.getAllBooks).toBeCalledWith(payload)  expect(storeState).toEqual({  list:  [{  name:  '你不知道的JavaScript'  }],  total:  1,  error:  null,  })  })

selectors 测试

// book.js  export  const  getBookList  =  (state)  =>  state.book.list  export  const  getBooksByCategory  =  createSelector(  getBookList,  (_,  category)  =>  category,  (books,  category)  =>  books.filter((book)  =>  book.category  ===  category),  )

// book.test.js  test('should get book by category',  ()  =>  {  const  category  =  '前端'  expect(getBooksByCategory(state,  category)).toEqual([{  name:  '你不知道的JavaScript'  }])  })

export  function  BookList({  category  })  {  const  location  =  useLocation()  const  {  tag  }  =  queryString.parse(location.search)  const  booksByCategory  =  useSelector((state)  =>  getBooksByCategory(state,  category))  const  books  =  tag  ?  booksByCategory.filter((book)  =>  book.tags.includes(tag))  :  booksByCategory  return  <>...</> }

ReduxWrapper renderWithRedux()

export  function  ReduxWrapper({  initialState,  store  =  mockStore(initialState),  children  })  {  return  <Provider  store={store}>{children}</Provider> }  export  function  renderWithRedux(ui,  {  initialState,  store  =  mockStore(initialState)  }  =  {})  {  return  {  ...render(  <ReduxWrapper  initialState={initialState}  store={store}>  {ui}  </ReduxWrapper>,    ),  store,  }  }

RouterWrapper renderWithRouter()

export  const  RouterWrapper  =  ({  route  =  '/',  history  =  createMemoryHistory({  initialEntries:  [route]  }),  children,  })  =>  <Router  history={history}>{children}</Router>   export  function  renderWithRouter(ui,  {  route  =  '/',  history  =  createMemoryHistory({  initialEntries:  [route]  })  }  =  {})  {  return  {  ...render(  <RouterWrapper  route={route}  history={history}>  {ui}  </RouterWrapper>,    ),  history,  }  }

• # 单元测试基础

• # React 单元测试

• # Redux 单元测试

• # React 应用测试策略

🤓 总结：快速响应变化，缩短反馈周期

• 缺少可重构性的软件，不可能快速响应变化。

• 没有高覆盖率、快速运行的单元测试，重构就不可能落地。

• 测试驱动开发是获得高质量单元测试集的唯一有效方法。

• 建立在充分覆盖且运行快速的自动化测试基础上的持续集成是迭代式开发的必要条件。

缺陷发现越早，修复成本越低

附录：武林秘籍 📓

Tasking 任务分解

• 完全穷尽

• 相互独立

Testing 单元测试

• Given

• When

• Then

Refactoring 重构

• 旧的不变，新的创建；

• 一步切换，旧的再见。

• React 官方中文文档 – 用于构建用户界面的 JavaScript 库

• React Testing Library

• 《深入 React 技术栈》

• 《深入浅出 React 和 Redux》

• 《重构 2：改善既有代码的设计》

• 《Clean Code 代码整洁之道》

• 《Refactoring to Patterns 重构与模式》

• 《SICP 计算机程序的构造和解释》 https://blog.jimmylv.info/2021-01-13-react-redux-testing-library/