实际测试用例的编写(react+ jest+ enzyme)

1 测试用例里面我遇到的最大问题就是获取元素,进行断言,有的时候不知道为什么就获取不到,或者不知道怎么断言,真的是醉了

 

2 每次测试的时候,做个测试快照,这我感觉还行,比较简单,就是有三种渲染方式,后面会用到,懒得写了,发一下其他人的链接吧. https://www.tangshuang.net/4070.html

  我的快照代码如下:

  

import React from 'react';
mport xxxfrom '../../../pages/xxx/xxxx';
import renderer, { act } from 'react-test-renderer';
import { mount, shallow, render } from 'enzyme';
jest.useFakeTimers();
const wrapper = shallow(<xxx/>);
const mountWrapper = mount(<xxx/>);
const renderWrapper = render(<xxx/>);
const tree = renderer.create(<xxx/>, {
    createNodeMock: node => {
        return document.createElement(node.type)
    }
}).toJSON();


it('renders correctly', () => {
    act(() => {
        expect(tree).toMatchSnapshot();
    })
});

  3  对于测试用例,我们不可避免的就是对于接口的模拟,所以我们就需要造一些假数据来跑我们原本的js文件

     对于一个完整的项目来说,基本都有server层,里面封装这我们接口的url,get还是post,参数什么的,而前端调用接口的方式也很多啊,ajax,axios,fetch等等,所以怎么模拟就看你原本代码怎么写,中心思想就是把原本的替换掉

   下面是我替换的一个例子,因为我们最终返回的是一个promise,所以就直接模拟一下,这里要特别感谢这个链接,https://cloud.tencent.com/developer/news/145296,里面有代码的目录结构,让我豁然开朗

let statusCode;
export function setStatus(code) {
    statusCode = code;  根据code不同返回不一样的数据
}

const baseUrl = '';
export function httpGet(path, query) {
    let url = baseUrl + path;  // api url 
    let getLocalUrl = getLocalDataUrl(url)  //处理一下url方便我们建立假数据的文件名
    // console.log(getLocalUrl, 'getLocalUrl')
    let method = 'get';
    try {
        return new Promise((resolve, reject) => {
            const mockData = require(`../__mockData__/${getLocalUrl}.data`).default;  // 获取假数据
            const result = mockData[`${method.toUpperCase()} ${statusCode}`];
            if (statusCode == 200) {
                resolve(result)
            } else {
                let err = result
                reject(err)
            }
        });
    } catch (err) {
        return err
    }
}

　　

  4 接下来就是对useEffect测试一下,在快照代码上面添加几行代码即可:

   

jest.mock('../../../@core/HttpRequest.js')

import renderer, { act } from 'react-test-renderer';
import HttpRequest, { setStatus } from '../../../@core/HttpRequest'

beforeEach(() => {
    act(() => {
        setStatus(200)
    })
})

　这样就可以跑到useEffect,但是只能跑成功case,那种失败的api请求没能模拟到,尴尬,好多代码没跑到就是因为这个问题

 

5 然后就是对于元素的click,change什么的,也就是找到元素,simulate一些他们的时间,类似于jq吧.下面给两个实例代码

 

wrapper.find('#fromDt').simulate('change', { target: { value: '3333' } })

wrapper.find('#searchCurrency').simulate('click')  

可以定义id或者class在元素上面,然后找就好了　　

 6 组件内部又使用了组件.

  使用dive(),详情可以在enzyme文档上看到,下面是我的实例代码

 

 wrapper.find(xxx组件名字).dive().find('#sortId').at(0).simulate('click')   //如果数据多条,可以使用at(数字),来指定对哪个元素进行操作

7--------------------------------------------------------------------------------------------------------------------以后想到再补充吧　　

8  https://jestjs.io/docs/zh-Hans/setup-teardown   关于jest的分组还是要看一下的,对于if判断很有用处