How to use createJestExpect method in Jest

The short answer is anywhere you want.

JavaScript has had a lot of different stages in its life and a lot of different types of people using it. Which is probably why most tools these days are highly configurable, to allow for personalization (customization.)

Even Jest itself shows these signs. For instance the test matcher will look for tests in either __tests__ folders or with files that are contain .spec or .test.

Or as per their docs in a visual manner:

├── __tests__
│   └── component.spec.js # test
│   └── anything # test
├── package.json # not test
├── foo.test.js # test
├── bar.spec.jsx # test
└── component.js # not test

With regards to fixtures and other test files the answer is the same, there is no one way to do it.

Pick what works for you.

I recommend for the __tests__ structure placing fixture data close to the test thats using it, and if multiple tests need access then move it further up the project until its in a common place.

My preference is a tests folder to keep the tests, fixtures, and testing separate to the src code.

Inspired by How is Meteor's withTracker function executed differently than the former reactive container function createContainer? I managed to upgrade the tests from createContainer to withTracker using the following:

In your mocked react-meteor-data.js file.

const createContainer = jest.fn((options = {}, component) => component );

const withTracker = jest.fn(Op => jest.fn(C => createContainer(Op, C)));

Then export withTracker instead of createContainer.

I've had trouble getting the __mocks__ folder working as well. The way I got around it is by using the jest.setMock(); method.

In your case, you would jest.setMock('../../../scripts/i18n/', require('../__mocks__/i18n');

Obviously, I am not certain of the location of your mock and the location of the real library you're using, but the first parameter should use the path where your real module is stored and the second should use the path where your mock is stored.

This should force your module and all modules that yours require (including React) to use your manually mocked i18n module.

I just found a solution.

I had to mock Router to be a div and contains its children code. This works the following way:

You need the folder __mocks__/react-router-dom.js which contains the following code:

import React from 'react';

const reactRouterDom = require("react-router-dom")
reactRouterDom.BrowserRouter = ({children}) => <div>{children}</div>

module.exports = reactRouterDom

Now you can use the MemoryRouter to define the path which the Route should point to.

App.test.js:

import React from "react";
import { render } from "@testing-library/react";
import { MemoryRouter } from 'react-router-dom';
import App from './App';


describe("unit-test", () => {
    it("renders the right component with following path '/impressum'", () => {
        const { getByTestId } = render(
            <MemoryRouter initialEntries={['/impressum']}>
                <App></App>
            </MemoryRouter>
        )

        let impressumPage = getByTestId("impressum-page")

        expect(impressumPage).toBeInTheDocument()
    })
})

Also visit the following link, I got the solution from there. https://medium.com/@antonybudianto/react-router-testing-with-jest-and-enzyme-17294fefd303

After several hours of searching and messing with Jest documentation and settings, I finally found how to pick only the files you want Jest to look for. Add the "jest" field to the package.json file settings:

{
    "devDependencies": {
        ...,
        "@types/jest": "^24.0.11",
        "jest": "^24.7.1"
    },
    "scripts": {
        "test": "jest"
    },
     "jest": {
         "testMatch": [
             "**/?(*.)+(spec|test).[j]s?(x)"
         ]
    }
}

This needs to be added to your package.json file. This is in the Jest Docs. In the regex above you need to change the .[jt]s just .[j]s, removing the "t".

Try running npm run test --clearCache as adviced here.

It did the job for me.

Don't have to download any deps, just use:

Object.defineProperty(window.document, 'cookie', {
  writable: true,
  value: 'myCookie=omnomnom',
});

(writable needs to be set to true)

Update: Node v10 has built-in availability of URLSearchParams on the global object so it can be used directly as anticipated in the question.

Older versions of Node:

One option is to set it as a global in the start-up script of the test runner:

import { URLSearchParams } from 'url';
global.URLSearchParams = URLSearchParams

With Jest, for example, you would use the setupTestFrameworkScriptFile to point to the above start-up script.

As a side note, if you wanted to achieve a similar outcome when creating a server-side Webpack bundle of universal code you can achieve this with the Webpack ProvidePlugin:

{
  name: 'server',
  target: 'node',
  // ...
  plugins: [
    // ...
    new webpack.ProvidePlugin({
      URLSearchParams: ['url', 'URLSearchParams'],
      fetch: 'node-fetch',
    }),
  ],
}

If I have replicated your issue correctly, here is the working demo, of the test cases you were trying to run. I have written a number of test cases using enzyme and jest, and I think this is the right way to do the testing. :)

Toggle.js

import React from "react";

export const SearchMenu = () => <input />;

class Toggle extends React.Component {
  state = { dropdownShown: true };

  toggleDropdown = value => {
    this.setState({ dropdownShown: value });
  };
  render() {
    return (
      <div
        className="search-type"
        onMouseOver={() => this.toggleDropdown(true)}
        onMouseLeave={() => this.toggleDropdown(false)}
      >
        <h1>Hover over me to hide/unhide the input</h1>
        {this.state.dropdownShown && <SearchMenu />}
      </div>
    );
  }
}

export default Toggle;

Toggle.spec.js

import React from "react";
import { shallow } from "enzyme";
import Toggle from "./Toggle";
import Enzyme from "enzyme";
import { SearchMenu } from "./Toggle";

describe("Toggle Component", () => {
  it("check state", () => {
    const wrapper = shallow(<Toggle />);
    expect(wrapper.find(<SearchMenu />).exists).toBeTruthy();

    // Testing Initial State
    expect(wrapper.state("dropdownShown")).toBe(true);
    wrapper.simulate("mouseleave");

    // Testing state after mouseleave
    expect(wrapper.state("dropdownShown")).toBe(false);

    // Testing state after mouseover
    wrapper.simulate("mouseover");
    expect(wrapper.state("dropdownShown")).toBe(true);
  });
});