TypeError: null의 'type' 속성을 읽을 수 없습니다 - 비동기 함수를 사용하여 vue 구성 요소 테스트
<p>구성요소 ComponentA.spec.js를 테스트하는 중인데 <code>TypeError: Cannot read property 'type' of null</code>이 발생합니다. ComponentA의 getData() 함수에서 wait 키워드를 제거하면 작동합니다. 테스트에서 getData API 호출을 조롱했지만 여전히 작동하지 않습니다. </p>
<p>전체 스택입니다.
TypeError: C: [개인정보 보호] 알 수 없음: null </p>의 'type' 속성을 읽을 수 없습니다.
<pre class="brush:js;toolbar:false;">at 주장(node_modules/@babel/types/lib/asserts/generated/index.js:284:112)
Object.assertIdentifier(node_modules/@babel/types/lib/asserts/generated/index.js:373:3)에서
새로운 CatchEntry에서 (node_modules/regenerator-transform/lib/leap.js:93:5)
Emitter.Ep.explodeStatement(node_modules/regenerator-transform/lib/emit.js:535:36)에서
node_modules/regenerator-transform/lib/emit.js:323:12에서
Array.forEach에서(<익명>)
Emitter.Ep.explodeStatement(node_modules/regenerator-transform/lib/emit.js:322:22)에서
Emitter.Ep.explode에서 (node_modules/regenerator-transform/lib/emit.js:280:40)
</pre>
<p>이것은 제가 테스트를 만들려고 하는 구성요소입니다. A</p>
<pre class="brush:js;toolbar:false;"><템플릿>
<div class="d-flex flex-row">
<컴포넌트-b />
<컴포넌트-c />
</div>
</템플릿>
<스크립트>
'./ComponentB'에서 ComponentB를 가져옵니다.
'./ComponentC'에서 ComponentC를 가져옵니다.
'apis'에서 { getData }를 가져옵니다.
기본값 내보내기 {
이름: '컴포넌트-a',
구성요소: {
구성요소B,
구성요소C,
},
비동기 생성() {
this.getData()를 기다립니다.
},
방법: {
// 이 함수가 범인이다
비동기 getData() {
노력하다 {
const 응답 = getData()를 기다립니다;
} 잡다 {
//
}
},
},
};
</스크립트>
</pre>
<p>이것은 내 ComponentA.spec.js 파일입니다</p>
<pre class="brush:js;toolbar:false;">'vuetify'에서 Vuetify를 가져옵니다.
'구성요소/ComponentA'에서 ComponentA를 가져옵니다.
import { createLocalVue,shallowMount, mount } from '@vue/test-utils';
jest.mock('shared/apis', () => {
const data = require('../fixedData/data.json');
반품 {
getData: jest.fn().mockResolvedValue(데이터),
};
});
const localVue = createLocalVue();
부끄럽게 하라;
함수 createShallowWrapper(옵션 = {}) {
얕은 마운트(컴포넌트A, {
로컬뷰,
부조화하다,
...옵션,
});
}
beforeEach(() => {
vuetify = 새로운 Vuetify();
});
explain('ComponentA', () => {
explain('컴포넌트 생성', () => {
test('테스트', () => {
const 래퍼 = createShallowWrapper();
기대(래퍼).toMatchSnapshot();
});
});
});
