项目作者: codeship

项目描述 :
Snapshot driven acceptance testing with jest
高级语言: TypeScript
项目地址: git://github.com/codeship/jest-acceptance.git
创建时间: 2018-07-05T18:34:37Z
项目社区:https://github.com/codeship/jest-acceptance

开源协议:MIT License

下载


jest-acceptance

jest-acceptance is a strategy for getting close to user acceptance quality testing, without the overhead of browser automation.

This strategy attempts to allow for a minimally mocked approach to ensure the interactions your users are having with your components, produce the expected interface changes. We do this by combining Jest’s snapshot testing ability, with a serialization strategy that allows you to compare the ways your interface change as a result of user interactions by surfacing the before/after interaction diff as a snapshot itself.

Currently targeted at only Vue applications.

Methods

  • next: returns a promise. Awaits Vue’s $nextTick under the hood. When the promise is resolved, it returns the dom’s next state.
  • nextSync: returns the next dom state without awaiting $nextTick.
  • current: returns the current dom state.

Usage

  1. import { mount } from '@vue/test-utils'
  2. import Tester from 'jest-acceptance'
  3. import MyApp from './src/index.vue'
  4. describe('MyApp', () => {
  5. it('should work', async () => {
  6. // Mount a new component wrapper with `@vue/test-utils`
  7. const wrapper = mount(MyApp)
  8. // Create a new instance
  9. const tester = new Tester(wrapper)
  10. // Initialize and test initial HTML output
  11. expect(tester.current()).toMatchSnapshot()
  12. // Perform some user interactions, producing/checking diffs along the way.
  13. tester.fillIn('name', 'Jane')
  14. tester.click({ ref: 'saveBtn' })
  15. expect(await tester.next()).toMatchSnapshot()
  16. ui.click({ ref: 'cancelBtn' })
  17. expect(await tester.next()).toMatchSnapshot()
  18. })
  19. })

This would produce three snapshots:

  1. The initial rendered HTML of the component.
  2. The effect the users interactions have on the HTML, in the form of a diff.
  3. The effect the users interactions have on the HTML, in the form of a diff.

We find the interaction diffs more useful than full repeated HTML snapshots because many times it is very difficult to spot the key interface changes you expect. This approach allows you to follow the diffs like a story.