How to use stackIsFromUser method in Jest

My team is using create-react-app and we had previously addressed this problem by adding the npm package jest-canvas-mock. Now after upgrading to react-scripts 3.4.1, we also had to add a specific import to our src/setupTests.ts file:

import 'jest-canvas-mock';

I was able to get state by doing this:

<Link
  to={"/posts"}
  state={{test: 'test'}}>
    Posts
</Link>

I opened the type declaration and finally realized state was a prop, and not part of the to object https://github.com/ReactTraining/react-router/blob/dev/docs/api-reference.md#link

So basically, I've found that my <NavBar/> component were dependent on two MS Graph API calls namely getAccountData() and setAccountData(), which obviously needed a token to function, and caused the nasty error above.

Therefore, I decided to bypass the two functions by simply mocking them, like so:

jest.mock('../msGraph', () => ({ setAccountData: jest.fn() }))
jest.mock('../msGraph', () => ({ getAccountData: jest.fn() }))

I was not dependent on getting data from Graph in order to carry out my test - So the two mock functions does not return any data. (I could however have done so by adding it inside the brackets of jest.fn())

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);
  });
});

To fix this specific error

SyntaxError: Unexpected token import

I fixed this using the following jest.config.js

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  testEnvironment: 'node',
  verbose: true,
  moduleDirectories: ['node_modules', 'src'],
  modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
  moduleFileExtensions: ['js', 'ts', 'json', 'node'],
  transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
  testPathIgnorePatterns: [
    '/build/',
    '/config/',
    '/data/',
    '/dist/',
    '/node_modules/',
    '/test/',
    '/vendor/'
  ],
  globals: {
    'ts-jest': {
      tsConfig: './src/app/tsconfig.json'
    },
    NODE_ENV: 'test'
  }
}

Note

preset: 'ts-jest/presets/js-with-ts',

transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],

this seemingly was what helped fix the issue, though if you compare the jest.config.js in this answer to my response i did add a few other options which may also be helpful for others.

A healthy amount of reading on the ts-jest config documentation, jest config documentation, and tsconfig documentation does wonders.

Don't overthink the perfect matcher, just write your test and move on:

const shouldntHave = [4,5,6];
const subject = [1,2,3]

shouldntHave.map(m => expect(subject).not.toContain(m));

EDIT: To be clear, I despise custom matchers. I'm already sorting through somebody else's code to fix a bug, I don't want to have to dive deep into testing infrastructure as well. Assertions should be simple and obvious.

Mocha supports any assertion library you want. You can take a look at how it deals with assertions here: http://mochajs.org/#assertions. I don't know which one you want to use.

Considering you are using Chai, which is pretty popular, here are some options:

Consider "foo" to be the target variable you want to test

Assert

var assert = chai.assert;
assert(foo) // will pass for any truthy value (!= null,!= undefined,!= '',!= 0)
// or
assert(foo != null)
// or
assert.notEqual(foo, null);

In case you want to use assert, you don't even need Chai. Just use it. Node supports it natively: https://nodejs.org/api/assert.html#assert_assert

Should

var should = require('chai').should();
should.exist(foo); // will pass for not null and not undefined
// or
should.not.equal(foo, null);

Expect

var expect = chai.expect;
expect(foo).to.not.equal(null);
// or
expect(foo).to.not.be.null;

PS: Unrelated but on Jest there is a toBeNull function. You can do expect(foo).not.toBeNull(); or expect(foo).not.toBe(null);

Oh I just found the answer.

Simply install this plugin: https://github.com/airbnb/babel-plugin-dynamic-import-node and add it to the .babelrc file:

{
  ...
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

Something like this should work:

it('should call toggleModal and nextTab functions on button click', () => {
  // Reset info from possible previous calls of these mock functions:
  baseProps.toggleModal.mockClear();
  baseProps.nextTab.mockClear();

  // Remove props that would end up hiding the button
  wrapper.setProps({
    newResponse: null,
    datasourceCatalog: null
  });

  // Find the button and call the onClick handler
  wrapper.find('#next-btn-ready-modal').simulate('click');

  // Test to make sure prop functions were called via simulating the button click
  expect(baseProps.toggleModal).toHaveBeenCalled();
  expect(baseProps.nextTab).toHaveBeenCalled();
})

Note: you can also split these into separate tests, one to test each call separately.