zoukankan      html  css  js  c++  java
  • [React] Use Jest's Snapshot Testing Feature

    Often when testing, you use the actual result to create your assertion and have to manually update it as you make changes to the feature. With Jest snapshot testing, you can let Jest do this part for you and write more tests and features faster and with more confidence. Let's learn about how you can use Jest snapshot testing to improve your own workflow.

    Using different renderer lib:

    import React from 'react'
    import TestUtils from 'react-addons-test-utils';
    import renderer from 'react-test-renderer'
    
    test('jsx', () => {
        const renderer = TestUtils.createRenderer();
        renderer.render(<MyComponent name="John" />);
        const component = renderer.getRenderOutput();
        expect(component).toMatchSnapshot()
    });
    
    test('jsx: example2', () => {
        const component = renderer.create(<MyComponent name="John" />)
        expect(component).toMatchSnapshot()
    })

    So first test eusing 'react-addons-test-utils' lib and second test using 'react-test-renderer' lib.

    Sometime you might will 'expect' lib form npm, but Jest also include global 'expect' function, so to avoid conflict:

    import React from 'react';
    import TestUtils from 'react-addons-test-utils';
    import expectLib from 'expect';
    import expectJSX from 'expect-jsx';
    
    import Box from '../components/Box';
    
    Object.assign({}, expect, expectLib, expectJSX);
    
        it('should rendering the string', () => {
           const renderer = TestUtils.createRenderer();
           renderer.render(<Box color="green" id="2" />);
           const result = renderer.getRenderOutput();
           expect(result).toMatchSnapshot()
        });

    So later if you change the Box component, the test will faild. Because the snapshots are not updated, you can simply type 'u' in command line to update the snapshots, then the tests will pass.

  • 相关阅读:
    erl_0012 timer:tc 测试模块函数调用运行耗时
    erl_0011 erlang 定时器相关
    erl0010
    erl0009
    erl0008
    erl0007
    erl0006
    erl0005
    开开心心过生活、踏踏实实做技术
    Android-理解Intent
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6375828.html
Copyright © 2011-2022 走看看