我正在用Jest模拟我的一个模块,并尝试在每个测试之间重置模拟。模拟无法重置,并且我的测试失败。
我正在使用Jest对我的原始ES6应用程序进行单元测试,并使用Jest.mock模拟应用程序中的模块之一。我尝试了几种不同的方式来休息模拟,但没有任何效果。
// base.js (Module to be mocked)
export const elements = {
searchInput: document.querySelector('.search__field'),
searchForm: document.querySelector('.search'),
searchResList: document.querySelector('.results__list'),
};
// searchView.test.js (Unit tests with Jest)
import * as searchView from '../../src/js/views/searchView';
jest.mock('../../src/js/views/base', () => ({
__esmodule: true,
elements: {
searchResList: {
innerHTML: '',
insertAdjacentHTML(position, markup) {
console.log('insertAdjacentHTML called');
switch (position) {
case 'beforeend':
this.innerHTML += markup;
break;
case 'afterbegin':
this.innerHTML = markup + this.innerHTML;
break;
default:
}
},
},
},
}
));
var base = require('../../src/js/views/base');
describe('searchView()', () => {
beforeEach(() => {
jest.resetAllMocks();
});
test('should render recipe markup', () => {
var base = require('../../src/js/views/base');
const recipes = [
{
recipe_id: '1',
title: 'fresh tomato pasta',
image_url: 'image1.png',
publisher: 'john doe',
},
{
recipe_id: '2',
title: 'pizza',
image_url: 'image2.png',
publisher: 'jane smith',
},
];
const markup = `
<li>
<a class="results__link results__link--active" href="#${recipes[0].recipe_id}">
<figure class="results__fig">
<img src="${recipes[0].image_url}" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">${recipes[0].title}</h4>
<p class="results__author">${recipes[0].publisher}</p>
</div>
</a>
</li>
<li>
<a class="results__link results__link--active" href="#${recipes[1].recipe_id}">
<figure class="results__fig">
<img src="${recipes[1].image_url}" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">${recipes[1].title}</h4>
<p class="results__author">${recipes[1].publisher}</p>
</div>
</a>
</li>`;
searchView.renderResults(recipes);
expect(base.elements.searchResList.innerHTML)
.toBe(markup);
});
test('should not render recipe markup for no recipes', () => {
var base = require('../../src/js/views/base'); //eslint-disable-line
searchView.renderResults([]);
expect(base.elements.searchResList.innerHTML).toBe('');
});
});
我希望这两个测试都能通过,但是测试-“应该渲染配方标记”成功,而第二次测试失败,因为模拟对象的'elements.searchResList.innerHTML'未重置为空字符串。