미니 프로그램이 점점 널리 사용되면서 우리의 프론트 엔드 개발 업무도 순수 웹 개발에서 웹 + 미니 프로그램의 크로스 엔드 개발로 확장되었습니다. 연구 및 개발 효율성을 높이려면 점점 더 많은 웹 모듈을 마이그레이션하고 업데이트해야 하며, 터미널 간 재사용을 달성하기 위해 미니 프로그램과 호환되어야 합니다. 이러한 모듈은 비즈니스에 따라 반복 및 버전 업데이트도 거치게 됩니다. 이때 각 최종 모듈의 신뢰성을 보장하기 위해 좋은 테스트가 필요합니다.
기존의 많은 웹 모듈을 미니 프로그램으로 마이그레이션했기 때문에 웹 측 테스트는 비교적 완료되었습니다. 따라서 우리가 고려해야 할 사항은 다음과 같습니다.
기존 웹 사용 사례를 작은 프로그램으로 빠르게 마이그레이션하는 방법
새 모듈에 대한 양쪽 끝에서 사용 사례를 빠르게 작성하는 방법.
(웹에서는 주로 Puppeteer와 Jest의 조합을 사용합니다.)
최종 솔루션으로 바로 이동할 수 있습니다
현재 모듈은 주로 다음 세 가지 유형입니다.
Type 1 모듈은 환경에 의해 제한되지 않으며 추가 작업 없이 웹과 단위 테스트를 공유할 수 있습니다. 테스트 케이스 개발 .
Type 3 모듈은 미니 프로그램과 웹의 큰 차이로 인해 재사용이 어렵습니다. (현재 우리 웹 UI 레이어는 주로 React 기반이며, 미니 프로그램은 네이티브 개발을 사용하고 일부 동형 개발을 위해 kbone과 협력합니다. 페이지) .
여기에서는 주로 Type 2 모듈에 대한 테스트 사례를 마이그레이션합니다.
미니 프로그램 공식은 현재 미니 프로그램 테스트를 지원하는 두 가지 도구를 제공합니다.
공식 도구와 Jest, Mocha 등의 테스트 프레임워크를 결합하여 미니 프로그램 환경에서 테스트를 구현할 수 있습니다.
저희는 Mini Program Automation을 선택했습니다. Puppeteer에서 웹사이드 테스트를 실행하는 것과 유사하게 미니 프로그램을 자동화하고 개발자 도구를 제어하여 미니 프로그램 환경에서 테스트를 구현할 수 있습니다. 둘 사이의 유사점은 크로스 엔드 마이그레이션 가능성과 테스트 사례 재사용 가능성을 제공합니다.
리포팅 모듈의 테스트 케이스 마이그레이션을 예로 들어보겠습니다. 다음은 기존 웹 리포팅 모듈의 테스트 케이스입니다.
이 사례에서 다루는 경로는 调用imlog.default.error()方法 -> 浏览器将发起请求 -> 对请求参数进行校验입니다.
test('.error()调用正常', async done => { const opts = { project: 'imlogtest',
}; // 检查上报请求的参数
const expector = req => { try { const url = req.url(); const method = req.method(); const headers = req.headers(); const body = req.postData(); const data = JSON.parse(body);
expect(url).toBe(DEFAULT_URL); // 请求的url符合预期
expect(method).toBe('POST'); // 请求的method符合预期
expect(headers['content-type']).toBe('text/plain'); // 请求的contentType符合预期
expect(data.url).toBe(TEST_PAGE_URL); // 请求体的url字段符合预期
done();
} catch(error) {
done(error);
}
}; // 监听上报请求并校验参数
page.once('request', expector); // 在浏览器中执行上报
page.evaluate( (o) => { const reportor = window.imlog.default;
reportor.config(o);
reportor.error('test'); // 进行上报
},
opts
);
});复制代码위 내용은 Puppeteer의 Page API를 주로 사용하고 있습니다.
미니 프로그램 자동화는 puppeteer와 유사한 일부 API를 제공합니다.
미니 프로그램이 Like Puppeteer를 지원한다면 이벤트 청취를 사용하여 wx API의 호출 매개변수를 가로채고 테스트 케이스 작성이 훨씬 쉬워질 것입니다. 우리가 상상하는 미니 프로그램 사용 사례는 다음과 같은 형태일 것입니다.
test('.error()调用正常', async done => { const opts = { project: 'imlogtest',
}; // 检查上报请求的参数
const expector = req => { try { // diff：按照特定格式解析出小程序请求参数
const {url, method, headers, body, data} = parseWxReqParams(req);
expect(url).toBe(DEFAULT_URL); // 请求的url符合预期
expect(method).toBe('POST'); // 请求的method符合预期
expect(headers['content-type']).toBe('text/plain'); // 请求的contentType符合预期
expect(data.url).toBe(TEST_PAGE_URL); // 请求体的url字段符合预期
done();
} catch(error) {
done(error);
}
}; // 监听上报请求并校验参数
// todo: miniProgram对象支持once/on等事件方法
miniProgram.once('request', expector); // 在小程序中执行上报
miniProgram.evaluate( (o) => { // diff: 请求方法挂在小程序app对象上
const reportor = getApp().imlog.default;
reportor.config(o);
reportor.error('test'); // 进行上报
},
opts
);
});复制代码miniProgram.on('api', fn)을 통해 API 호출 시 전달되는 매개변수를 이벤트 형태로 모니터링할 수 있는 방법을 찾는 한 .
이 형식에서 웹과 미니 프로그램 사용 사례의 차이점은 다음과 같습니다.
먼저 MiniProgram.d.ts를 통해 노출된 항목을 관찰합니다. miniprogram-automator를 사용하면 MiniProgram 클래스 자체가 EventEmitter에서 상속된다는 것을 알 수 있습니다.
import { EventEmitter } from 'events';export default class MiniProgram extends EventEmitter { // ...}复制代码다음 단계는 API가 호출될 때 miniProgram 개체의 내보내기 메서드를 트리거하는 방법을 찾는 것입니다.
이를 달성하는 데 도움이 되는 두 가지 자동화 API가 있습니다.
miniProgram.mockWxMethod를 사용하면 wx 객체에 지정된 메서드를 호출한 결과를 재정의할 수 있습니다.
miniProgram.exposeFunction은 미니 프로그램이 테스트 스크립트의 메서드를 호출할 수 있도록 AppService에서 전역적으로 메서드를 노출합니다.
이 순간 과감한 아이디어가 떠올랐어요
위 내용은 소규모 프로그램 자동화 테스트를 위한 wx API 가로채기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
