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.

  • 相关阅读:
    STM32F401
    按字母顺序排列的IDC函数列表
    IDA 中文字符串
    Retrieving ST-Link/V2 Firmware from Update Utility
    IDA IDC Tutorials: Additional Auto-Commenting
    IDA resources
    Digital Current-Mode Control Challenges Analog Counterparts
    SQLSERVER 里SELECT COUNT(1) 和SELECT COUNT(*)哪个性能好?
    将ACCESS数据库迁移到SQLSERVER数据库
    RedGate 工具SQLMultiScript1.1
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6375828.html
Copyright © 2011-2022 走看看