브라우저에서 mocha 테스트는 어떻게 실행합니까?
저만 그런가요, 아니면 문서에서 브라우저에서 테스트를 실행하는 방법을 전혀 설명하지 않았나요?
예시에 표시된 HTML 파일을 작성해야 합니까?그럼 어떻게 하면 내 프로젝트의 특정 테스트 케이스를 실행할 수 있을까요?
중인 것과 .mocha로젝프「 」의 모든 서브 .test.
브라우저에서 테스트를 실행해야 하는 경우 간단한 HTML 페이지를 테스트 러너 페이지로 설정해야 합니다.페이지에는 Mocha, 테스트 라이브러리 및 실제 테스트 파일이 로드됩니다.테스트를 실행하려면 브라우저에서 주자를 열기만 하면 됩니다.
예: html 코드:
<!DOCTYPE html>
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd')</script>
<!-- load code you want to test here -->
<!-- load your test files here -->
<script>
mocha.run();
</script>
</body>
</html>
디렉토리 구조 설정
메인 코드 파일과 다른 디렉토리에 테스트를 저장해야 합니다.이것에 의해, 예를 들면, 장래에 다른 타입의 테스트(통합 테스트나 기능 테스트등)를 추가하는 경우에, 그것들을 보다 간단하게 구조화할 수 있습니다.
JavaScript 코드의 가장 일반적인 방법은 프로젝트의 루트 디렉토리에 test/라는 디렉토리를 갖는 것입니다.그런 다음 각 테스트 파일은 test/someModuleTest.js 아래에 배치됩니다.
중요 사항:
- 모카의 CSS 스타일을 로딩하여 테스트 결과의 멋진 포맷을 제공합니다.
- mocha라는 아이디로 div를 만듭니다.여기에 테스트 결과가 삽입됩니다.
- 모카와 차이를 싣습니다.npm 경유로 설치했기 때문에 node_modules 폴더의 서브폴더에 있습니다.
- 모카를 불러서Mocha의 테스트 도우미들을 이용할 수 있게 해드렸습니다.
- 그런 다음 테스트하려는 코드와 테스트 파일을 로드합니다.아직 아무것도 없어요.
- 마지막으로 mocha.run을 호출하여 테스트를 실행합니다.소스 및 테스트 파일을 로드한 후 호출해야 합니다.
서류도 명확하지 않다고 생각했지만, 결국 알아채고 셋업했습니다.방법은 다음과 같습니다.
Index.html에 Mocha 스크립트와 CSS를 포함합니다.또한 ID가 "Mocha"인 div를 포함하여 출력을 삽입합니다.실행할 테스트 스크립트를 포함합니다.
<link href="lib/mocha/mocha.css" rel="stylesheet" />
<script src="lib/mocha/mocha.js"></script>
<script src="test/my_mocha_test.js"></script>
<div id="mocha"></div>
테스트 파일(이 예에서는 my_mocha_test.js)의 맨 위에 다음 설정 행을 포함합니다.
// 'bdd' stands for "behavior driven development"
mocha.setup('bdd');
이제 테스트와 Mocha 콘텐츠가 모두 로드되면 다음 명령을 사용하여 테스트를 실행할 수 있습니다.
mocha.run();
이벤트 리스너에 추가하여 버튼을 누르거나 다른 이벤트에서 트리거할 수도 있고 콘솔에서 실행할 수도 있지만 "mocha" ID를 사용하여 테스트 출력을 div에 넣을 수도 있습니다.여기 GitHub에서 볼 수 있는 코드가 설정된 페이지가 있습니다.
https://captainstack.github.io/public-stackhouse/
나의 방법:
ES6, Import, Export, chai
mocha 6.1.4 및 chai 4.2.0 사용.
src/MyClass.js:
export default class MyClass { }
test/MyClass.js:
import MyClass from "../src/MyClass.js";
let assert = chai.assert;
describe('MyClass tests', function () {
describe('The class', function () {
it('can be instantiated', function () {
assert.isObject(new MyClass());
});
});
});
test/index.syslog:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mocha</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mocha.css">
<script src="mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script type="module" class="mocha-init">
mocha.setup('bdd');
</script>
<!-- ------------------------------------ -->
<script type="module" src="test.js"></script>
<!-- ------------------------------------ -->
<script type="module">
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
mocha.js 파일과 mocha.css 파일은mocha init test단, node_mocha/mocha에서도 찾을 수 있습니다.
만약 이것이 개선가능하다면, 나에게 알려주세요.그 답은 이 게시물에 의해 영감을 얻었다.
브라우저의 가장 기본적인 chai/mocha 테스트는 다음과 같습니다.
mocha.setup('bdd');
describe('test', () => {
it('passes', () => {
chai.expect(1).to.eql(1);
});
it('fails', () => {
chai.expect(1).to.eql(2);
});
});
mocha.run();<div id="mocha" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.0.1/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>언급URL : https://stackoverflow.com/questions/42857778/how-do-you-run-mocha-tests-in-the-browser
'sourcecode' 카테고리의 다른 글
| 온클릭 속성에 백일해 변수 사용 (0) | 2023.03.25 |
|---|---|
| 캐시 방법NET Web API 요청( & use with Angular)JS $http) (0) | 2023.03.25 |
| 앵커 태그의 유효한 특성 '비활성화'입니까? (0) | 2023.03.25 |
| React.js에서 componentWillMount 또는 componentDidMount에서 초기 네트워크 요청을 해야 합니까? (0) | 2023.03.25 |
| useState() 후크를 사용하여 기능 컴포넌트를 테스트할 때 상태를 설정합니다. (0) | 2023.03.20 |