提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[React] Test friendly approach

React test Approach
2023-09-14 08:59:18 时间

Add functional function such as change state, this should have tests covered.

For example, in a component, there is a function call 'addBox':

    onAddBox = () => {
        const newBox = {
            id    : this.state.boxes.length,
            color : 'red'
        };

        const boxes = addBox(this.state.boxes, newBox);

        this.setState({ boxes });
    };

 

Here we use a function call 'addBox', this is written in a new file:

export const addBox = (boxes, newBox) => boxes.concat(newBox);

 

SO when need to use it, we need to import it to the component, not just write this function into component methods. Because if we make this function sprated from component methods, we are able to test it by just simply import this function to the test file.

import {addBox} from '../components/App/AppHelper';

const boxes = [
    {
        id    : 0,
        color : 'red'
    },
    {
        id    : 1,
        color : 'red'
    }
];

const newBox = {
    id: 2,
    color: 'green'
};

test('Should be able to add new box', () => {
   const expected = [
       {
           id    : 0,
           color : 'red'
       },
       {
           id    : 1,
           color : 'red'
       },
       {
           id: 2,
           color: 'green'
       }
   ];
   const result = addBox(boxes, newBox);
   expect(result).toEqual(expected);
});

test('addBox should be immutable', () => {
    const result = addBox(boxes, newBox);
    expect(result).not.toBe(boxes);
});

Here has two test, one is to test 'addBox' should actually add a new box to the existing array. Second test is to make sure we don't mutatue origianl data.

相关文章