How to use createQueueChildMessage method in Jest

I suppose the unit test should be robust enough to catch the error, if case of any undesirable code changes.

Please include strict assertions in your tests.

For the conditional statements, please cover the branches as well. E.g in case of if and else statement you will have to write two tests.

For user actions, you should try to simulate the actions rather than calling the function manually.

Please see the example below,

import React from 'react';
import { shallow } from 'enzyme';
import { SearchForm } from 'components/Search';


describe('Search Component', () => {
  let wrapper;
  const toggleAlert = jest.fn();
  const handleChange = jest.fn();
  const successAlert = {
    alertType: 'success',
    alertMessage: 'Success!!!'
  }
  const errorAlert = {
    alertType: 'error',
    alertMessage: 'Error!!!'
  }
  beforeEach(() => {
    wrapper = shallow(<SearchForm toggleAlert={toggleAlert} />);
  });
  it('"handleSubmit" to have been called with "mocky"', () => {
    expect(toggleAlert).not.toHaveBeenCalled();
    expect(handleChange).not.toHaveBeenCalled();
    wrapper.find('Input').simulate('change', { target: { value: 'mocky' } });
    expect(handleChange).toHaveBeenCalledTimes(1);
    expect(wrapper.state().searchTerm).toBe('mocky');
    wrapper.find('Button').simulate('click');
    expect(toggleAlert).toHaveBeenCalledTimes(1);
    expect(toggleAlert).toHaveBeenCalledWith(successAlert);
    expect(wrapper.state().searchTerm).toBe('');
  });

  it('"handleSubmit" to have been called with "other than mocky"', () => {
    expect(toggleAlert).not.toHaveBeenCalled();
    expect(handleChange).not.toHaveBeenCalled();
    wrapper.find('Input').simulate('change', { target: { value: 'Hello' } });
    expect(handleChange).toHaveBeenCalledTimes(1);
    expect(wrapper.state().searchTerm).toBe('Hello');
    wrapper.find('Button').simulate('click');
    expect(toggleAlert).toHaveBeenCalledTimes(1);
    expect(toggleAlert).toHaveBeenCalledWith(errorAlert);
    expect(wrapper.state().searchTerm).toBe('Hello');
  });
});

Node

If you want to run them directly through node, try to require jest and/or jest-runtime. Also give @types/jest a try as well.

Check Edit 2 for new info about this

Edit

@types/jest (jest-DefinitelyTyped) is definitely needed (or just one solution). If you install it (e.g., dev dependency), the IDE errors should go away. I just tried it on Webstorm, and it works.

Edit 2

The new Jest@20 Matchers (e.g., .resolves and .rejects) are still not defined in @types/jest. You can keep track of its status on the links below: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/16645 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16803

It should be available soon, though!

Also, it doesn't seem possible to run it directly through node. Last night I tried a bunch of different things, but using jest is the way to go - it really uses node under the hood, so I thought it would be possible as well. @thymikee over your opened issue at GitHub made clear that it's not.

Edit 3

The new release (20.0.1) includes the newest Jest definitions.

Lint

this isn't in the scope of this specific problem, but it also helps

Are you using something like ESLint? If so, you'll need eslint-plugin-jest

Following the steps described in this page: https://www.npmjs.com/package/eslint-plugin-jest, you will basically need to add it as an ESLint plugin and set jest globals in the ESLint configuration:

{
  "env": {
    "jest/globals": true
  }
}

If you plan on supporting ES6 tests, you'll also need Babel and babel-jest plugin with the following jest configuration:

"transform": {
  "^.+\\.js$": "babel-jest"
}

Finally, for Typescript tests you'd need the @types/jest and ts-jest packages as well

This was a bug and has been fixed: https://github.com/facebook/create-react-app/issues/7818

In jest the global name space must be accessed by global not window.

global.scrollTo = jest.fn()

jest doesn't know how to load other file extensions than js/jsx,you need to find the jest.config.js and add transformer for svg files.

"transform": {
   "^.+\\.tsx?$": "ts-jest",
   "^.+\\.svg$": "<rootDir>/svgTransform.js"
},

and create the svgTransform.js file (see Custom transformers) in your root directory with the following content:

// See https://stackoverflow.com/questions/58603201/jest-cannot-load-svg-file
module.exports = {
  process() {
    return {
      code: `module.exports = {};`,
    };
  },
  getCacheKey() {
    // The output is always the same.
    return "svgTransform";
  },
};

link: https://jestjs.io/docs/code-transformation#examples

Note this is the updated syntax for jest 28.

The problem is your selector wrapper.find('.checkbox').first(). This will trigger the event on <div className="checkbox">. But this element does not have the event listener, and .simulate does not behave like real events so it does not propagate. From the docs:

Currently, event simulation for the shallow renderer does not propagate as one would normally expect in a real environment. As a result, one must call .simulate() on the actual node that has the event handler set. Even though the name would imply this simulates an actual event, .simulate() will in fact target the component's prop based on the event you give it. For example, .simulate('click') will actually get the onClick prop and call it.

To fix this you have to select the component that have the click handler attached:

wrapper.find('Checkbox')

To set a timeout on a single test, pass a third option to it/test, for example:

 it('testing balabala', async () => {
   ...
 }, 70000);

The ownership of the expect library has been donated to jest from v21+. Since then some of the method names and their functionality has been changed. The following modification to code will help to overcome issue.

var expect = require('expect');
var {generateMessage}  = require('./message');

describe('generateMessage', () => {
   it('should generate correct message object', () => {

       var from = 'Jen';
       var text = 'Some message';
       var message = generateMessage(from, text);

       expect(typeof message.createdAt).toBe('number');
       expect(message).toMatchObject({from, text});
   });

});

This example will work if you compile ES6 modules syntax into ES5, because in the end, all module exports belong to the same object, which can be modified.

import { allowThrough } from './allowThrough';
import { ENABLED } from './constants';
import * as constants from './constants';

describe('allowThrough', () => {
    test('success', () => {
        constants.ENABLED = true;

        expect(ENABLED).toBe(true);
        expect(allowThrough({ value: 1 })).toBe(true);
    });

    test('fail, ENABLED === false', () => {
        constants.ENABLED = false;

        expect(ENABLED).toBe(false);
        expect(allowThrough({ value: 1 })).toBe(false);
    });
});

Alternatively, you can switch to raw commonjs require function, and do it like this with the help of jest.mock(...):

const mockTrue = { ENABLED: true };
const mockFalse = { ENABLED: false };

describe('allowThrough', () => {
    beforeEach(() => {
        jest.resetModules();
    });

    test('success', () => {
        jest.mock('./constants', () => mockTrue)
        const { ENABLED } = require('./constants');
        const { allowThrough } = require('./allowThrough');

        expect(ENABLED).toBe(true);
        expect(allowThrough({ value: 1 })).toBe(true);
    });

    test('fail, ENABLED === false', () => {
        jest.mock('./constants', () => mockFalse)
        const { ENABLED } = require('./constants');
        const { allowThrough } = require('./allowThrough');

        expect(ENABLED).toBe(false);
        expect(allowThrough({ value: 1 })).toBe(false);
    });
});