zoukankan      html  css  js  c++  java
  • [Jest] Snapshot

    The problem we face daily when we do testing:

    The Data structure may changing, component outlook might changing... this makes it hard for us do testing. Imaging when the data structure changed, your tests broken, when you need to change the tests accordingly. Our your component DOM structure changed, then you need to update your tests to match the changes.

    There are lots of manul work. Jest's snapshot make it easy for us to do test.

    You no longer need to hard code value inside your test, you just need to do:

    import React from 'react';
    import renderer from 'react-test-renderer';
    import MovieList from './MovieList';
    
    it('Renders movies', () => {
       const component = renderer.create(
           <MovieList query="F" />
       );
    
       expect(component).toMatchSnapshot();
    })

    it will generate a snapshot file, and next time you run the tests, it will check whether the output is the same as what saved into snapshot. If they are not the same, tests will faild, but it allow you to update snapshot, if after updated, they are matched, then tests will pass.

    You can also control what to be saved into snapshot by using 'Serializer'.

    expect.addSnapshotSerializer({
       test: (val) => val.title && val.emoji, // check whether should use serializer
       print: () => `${val.emoji} ${val.title}`// the formatted value to be saved into snapshot
    })

    It can also work with serializer from other libaray:

    import {shallow} from 'enzyme';
    import enzymeSerializer from 'enzyme-to-json/serializer';
    
    expect.addSnapshotSerializer(enzymeSerializer);
    
    it('REnders movies', () => {
       const component = shallow(
          <MovieList query="F" />
       );
    
       expect(component).toMatchSnapshot(); 
    });
  • 相关阅读:
    hdu 5112 A Curious Matt (水题)
    hdu 5464 Clarke and problem(dp)
    (2)线程优先级、线程安全
    (1)进程与线程
    并发与并行
    (5) 守护线程与线程阻塞
    java线程中断2
    sleep()和wait()的区别
    java线程中断
    java创建线程的三种方式及其对比
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6636229.html
Copyright © 2011-2022 走看看