如何在测试之间重置Jest模拟?

时间:2019-08-03 00:22:55

标签: javascript node.js unit-testing mocking jestjs

我正在用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'未重置为空字符串。

0 个答案:

没有答案