How to use nodeIsComment method in Jest

I ended up using the @testing-library/user-event library. I replaced fireEvent with userEvent for the Tab press.

My code now looks like this:

    import userEvent from '@testing-library/user-event';

    test('pressing Tab button should move focus to input2 as input1 is empty', () => {
        const input1 = container.getElementsByTagName('input')[0];
        const input2 = container.getElementsByTagName('input')[1];

        input1.focus();
        fireEvent.change(input1, { target: { value: '' } });
        userEvent.tab(); //this line made it work

        expect(input2).toHaveFocus(); //passing now
    });

Reference: https://github.com/testing-library/user-event#tabshift-focustrap

You can use collectCoverageFrom inside your package.json jest configuration to exclude *Container.jsx files from code coverage.

"jest": {
    "collectCoverage": true,
    "collectCoverageFrom": [
        "**/*.{js,jsx}",
        "!**/node_modules/**",
        "!**/*Container.jsx"
    ]
}

If you use create-react-app remove the line "collectCoverage": true, which is not supported.

Source: https://jestjs.io/docs/en/configuration.html#collectcoveragefrom-array

This most likely happens because String.prototype.replaceAll is not implemented in Node.js (at least as of version v14.15.0).

One alternative you could use are regular expressions like in this example:

const str = 'foo-foo';
const regex = /foo/g; // Note the 'g' flag, which matches all occurrences of the expression

console.log(str.replace(regex, 'bar')); // 'bar-bar'

You can check here for more info on regular expressions.

Issue

There might be other issues with your test as well, but I will address the specific question you asked about expect(mockedOnSuccess).toHaveBeenCalledTimes(1); failing with 0 times:

jest.runAllTimers will synchronously run any pending timer callbacks until there are no more left. This will execute the anonymous function scheduled with setTimeout within runPolling. When the anonymous function executes it will call api.request(url) but that is all that will happen. Everything else in the anonymous function is contained within then callbacks that get queued in the PromiseJobs Jobs Queue introduced with ES6. None of those jobs will have executed by the time jest.runAllTimers returns and the test continues.

expect(mockAxios.request).toHaveBeenCalledTimes(1); then passes since api.request(url) has executed.

expect(mockedOnSuccess).toHaveBeenCalledTimes(1); then fails since the then callback that would have called it is still in the PromiseJobs queue and hasn't executed yet.

Solution

The solution is to make sure the jobs queued in PromiseJobs have a chance to run before asserting that mockedOnSuccess was called.

Fortunately, it is very easy to allow any pending jobs in PromiseJobs to run within an async test in Jest, just call await Promise.resolve();. This essentially queues the rest of the test at the end of PromiseJobs and allows any pending jobs in the queue to execute first:

test('runPolling should be called recursively when onSuccess returns true', async () => {
  ...
  jest.runAllTimers();
  await Promise.resolve();  // allow any pending jobs in PromiseJobs to execute
  expect(mockAxios.request).toHaveBeenCalledTimes(1);
  expect(mockedOnSuccess).toHaveBeenCalledTimes(1); // SUCCESS
  ...
}

Note that ideally an asynchronous function will return a Promise that a test can then wait for. In your case you have a callback scheduled with setTimeout so there isn't a way to return a Promise for the test to wait on.

Also note that you have multiple chained then callbacks so you may need to wait for the pending jobs in PromiseJobs multiple times during your test.

More details about how fake timers and Promises interact here.

You're right, by default Jest spies keep their state through your different tests.

To reset them, I personally use :

afterEach(() => {
  jest.clearAllMocks()
})

see https://facebook.github.io/jest/docs/en/jest-object.html#jestclearallmocks for more information

This code works for me:

import React from "react";

const initialInputValue = "initialInputValue";

class TestForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: initialInputValue };
  }
  render() {
    const { inputValue } = this.state;

    return (
      <div>
        {console.log("inputValue", inputValue)}
        <input
          value={inputValue}
          onChange={e => this.setState({ inputValue: e.target.value })}
          placeholder="placeholder"
        />
        {inputValue !== initialInputValue && <div>Input has changed</div>}
      </div>
    );
  }
}

import { render, cleanup, fireEvent } from "react-testing-library";
import "jest-dom/extend-expect";

afterEach(cleanup);

test("form", () => {
  const { getByPlaceholderText, getByText } = render(<TestForm />);
  fireEvent.change(getByPlaceholderText("placeholder"), {
    target: { value: "new value" }
  });
  expect(getByText("Input has changed")).toBeInTheDocument();
});

It does not work in codesandbox though, I guess they have some issues with keeping the browser and the test environment separated.

So, many thanks to the Jest folks on Discord. It's possible to actually clear the modules from the cache with the jest.resetModules() function.

So my test.ts file will look as follows:

describe("Localisation initialisation", () => {
    beforeEach(() => {
        jest.resetModules();
    });

    it("Sets language", () => {
        const localisation = require("./localisation");
        // Perform the tests
    });

    it("Sets english messages", () => {
        const localisation = require("./localisation");
        // Perform the tests
    });

    it("Sets french messages", () => {
        const localisation = require("./localisation");
        // Perform the tests
    });
});

The beforeEach() call to jest.resetModules() ensures we're re-running the code in the module.

To install react-native-vector-icons, you need to install it, then link it. First run:
npm install react-native-vector-icons --save
or if you use yarn
yarn add react-native-vector-icons

Then, you will have to link it like this:
react-native link react-native-vector-icons

Hm. I've found a solution.

See. A change in my file with the target function.

const myClass = require('./myClass');
// const instance = new myClass(); <== Not here...

module.exports.functionToTest = async function () {
    const instance = new myClass(); // <== ...but there.

    // Some stuff...

    const value = await instance.myMethod();

    // Some stuff that define a result variable (partially with value).

    return result;
} 

And my spec file :

const myFile = require('./myFile');

// I specify to Jest that I'll mock a file
jest.mock('./myClass');
const myClass = require('./myClass');

// I prepare the mock function. In that case a promise wich resolve 'false'
const mMock = jest.fn().mockResolvedValue(false);

// I mock the method 'myMethod' in 'myClass'
myClass.mockImplementation(() => {
    return {
        myMethod: mMock
    };
});


// Then, I just take the test
describe('My test', async () => {
    it('should mock myClass.myMethod in order to return false', () => {
        const result = await myFile.functionToTest();

        expect(result).toBeFalsy();
    }
}