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(); 
    });
  • 相关阅读:
    阅读计划
    个人介绍
    构建之法阅读笔记04
    结对开发——返回一个整数数组中最大子数组的和 (首尾相接版)
    结对开发——返回一个整数数组中最大子数组的和
    学习进度条(三)
    构建之法阅读笔记03
    结对开发——四则运算(三)
    四则运算——单元测试(测试方法:Right-BICEP )
    学习进度条(二)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6636229.html
Copyright © 2011-2022 走看看