Tags down


Mock Document for Jest Testing

By : Александр Казарян
Date : October 16 2020, 06:10 PM
may help you . The default test environment for Jest is jsdom which provides a browser-like environment.
If your test requires specific content in document then you can set the document body by using something like document.body.innerHTML.
code :
const OFFSET_TOP = 5;

const func = () => 
  document.getElementById('theid').getBoundingClientRect().top <= OFFSET_TOP ?
    'less' :

test('func', () => {
  document.body.innerHTML = '<div id="theid">my div</div>';
  expect(func()).toBe('less');  // Success!

  const div = document.getElementById('theid');
  div.getBoundingClientRect = () => ({ top: 10 });  // <= mock getBoundingClientRect
  expect(func()).toBe('more');  // Success!

Share : facebook icon twitter icon

Mock a class for testing with Typescript and Jest

By : Ḿśtęŕ IñcǾññu
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , First, you have to create a method to replace the implementation of your desired mocked methods. For example, I created it in the class TestUtil :
code :
export class TestUtil {

 public static mockService(service: any, methods: string[]) {
   class MockedClass {

   methods.forEach(method => MockedClass.prototype[method] = Observable.of({}));

   return {provide: service, useClass: MockedClass};
describe('TestService', () => {
  let TestObject: TestService;

  beforeEach(() => {
        providers: [TestUtil.mockService(TestService, ['GetRandom'])]

  beforeEach(inject([TestService], (injectedTestService: TestService) => {
    TestObject = injectedTestService;

  describe('Sample Test', () => {
    test('Random Number is mocked by You', () => {
       spyOn(TestObject, "GetRandom").and.returnValue(5);

Jest mock document.activeElement

By : Leewaa 58
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further The solution is to create a mocked DOM and use it as scenario:
code :
const trap = {
  // ...
  init() {
    if (document.activeElement === this.firstTabStop) {
      return this.lastTabStop.focus();

module.exports = trap.init;
const trap = require('./trap.js');

// Mock a DOM to play around
document.body.innerHTML = `
        <button id="btn1">btn 1 </button>
        <button id="btn2">btn 2 </button>
        <button id="btn3">btn 3 </button>

// Mock Jest function
const mockBtnFocus = jest.fn();
const mockBtnFirst = document.getElementById('btn1');
const mockBtnLast = document.getElementById('btn3');

it('should focus this.lastTabStop when activeElement is this.firstTabStop', () => {
    mockBtnFirst.focus(); // <<< this is what sets document.activeElement
    mockBtnLast.focus = mockBtnFocus;

    // Mock trap context to access `this`
        firstTabStop: mockBtnFirst,
        lastTabStop: mockBtnLast,


testing a jest mock function itself

By : Sanaa Jarrah
Date : March 29 2020, 07:55 AM
will help you At first your mock is never resolved, because you don't call passed resolve callback, and second is that mock should return object with json method, which should return promise:
code :
export default  function FetchService(url) {
  const json = () => Promise.resolve( posts );
  return  new Promise( resolve => resolve({ json }));
test('getting data',(done)=>{
    .then(data => data.json())
      data => {

Is there a faster way to reset a mock when testing with Jest?

By : cmcallister
Date : March 29 2020, 07:55 AM
I wish this helpful for you We set React and TestUtils variables before describe() and don't use jest.dontMock('react'). Also requires for Widget and WidgetStore could be there. In your case like this:

Testing catch block via jest mock

By : Khoel
Date : March 29 2020, 07:55 AM
I wish this help you I'm trying to test the 'catch' block of an async redux action via jest, but throwing a catch in the mock causes the test as a whole to fail. , I don't know if it's still relevant, but you can do it in this way:
Related Posts Related Posts :
  • How can I use function chaining with dates in JavaScript?
  • What is the difference between "delete" and "Reflect.deleteProperty()"
  • How to get attributes of individual elements in jquery array
  • Why do I get different results with "=" vs. "===" in javascript with Conditional (Ternary) Operators
  • I am trying to hold value of document.getElementById("image").src=UserInput +".gif"
  • Array being pushed into another array isn't displaying
  • Is there a React.js NPM module or any other solution for image/object mutli-selection?
  • 80% Javascript Solution for Flags in Codility
  • I want to display background while scrolling down
  • RegEx for matching text between two tags
  • Does having a lot of inner 'helper' functions inside a functional stateless react component will result in worse perform
  • How to submit a form through a button outside the form?
  • ESLint: Use callback in setState when referencing the previous state
  • How to parse state from one component to another in my example?
  • Visible Html select option showing under hidden items
  • Create SVG circle using path with 6 segments
  • Getting error while reading from a text file
  • Read a value from JSON Array without entity
  • Checkbox check or uncheck value null
  • Displaying multiple slider values to users
  • Am doing the destructing right?
  • VueJS data-bind object styling not working
  • Combine array and object destructuring
  • Execution skips promise statements
  • sort an array of objects leaving first field
  • how to highlight table cells in a certain way when hover over
  • Problems when using Chosen Selectors in external helper functions
  • Need to merge two objects together that each have an array to the matching IDs
  • How to get previous 6 months date from current date in javascript
  • how to get object value only without mentioning key from array list using ngFor in angular 7
  • Plugging into on_page_change events in testcafe
  • WithStore: Cannot read property 'state' of undefined (pure-react-carousel)
  • fullcalendar event info in modal popup
  • How do i reduce time complexity of this code
  • Deep comparing object props in React not working as expected
  • JavaScript method to remove case insensitive duplicates from string/Numbers
  • When to use parentheses after function name call (es6)
  • Convert list of Objects when the levels are given in an array
  • template variable always undefined ngOnChanges
  • RegEx for matching the first word
  • Render different au-target-id in aurelia repeat
  • Why does the function start before the button is pressed?
  • where can I vote for changes to javascript?
  • Change the digit format pagination in the slider
  • Hover/focus state activated initially on page load
  • Why do my normal sync codelines, works like async?
  • How to prevent or disable Bootstrap 4 popover auto positioning behavior (Self adjusting behavior)
  • What is the meaning of ({})?
  • How do I make a link to a property if the property is yet to be declared? (In a Class)
  • Getting Promise as return value inside FlatList React-native
  • Why can't you access JSON directly from the response in Fetch API?
  • How to grab value out of this nested array
  • function is not returning any value
  • "Cannot read property 'map' of undefined (React.js)"
  • How do I extract the contents of a specific json within the html?
  • How do I assign a src attribute to the background-image of another element?
  • How to access a public method from a wrapped Component using TypeScript?
  • Errors while looping through the objects
  • How to fix "TypeError: fsevents is not a constructor" react error
  • Invalid JSON characters after processing JSON file in Vue.js
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk