I am using UseHistory hook in react router v5.1.2 with typescript? When running unit test, I have got issue.
&gt; TypeError: Cannot read property &#39;history&#39; of undefined.


```typescript
import { mount } from &#39;enzyme&#39;;
import React from &#39;react&#39;;
import {Action} from &#39;history&#39;;
import * as router from &#39;react-router&#39;;
import { QuestionContainer } from &#39;./QuestionsContainer&#39;;

describe(&#39;My questions container&#39;, () =&gt; {
    beforeEach(() =&gt; {
        const historyHistory= {
            replace: jest.fn(),
            length: 0,
            location: { 
                pathname: &#39;&#39;,
                search: &#39;&#39;,
                state: &#39;&#39;,
                hash: &#39;&#39;
            },
            action: &#39;REPLACE&#39; as Action,
            push: jest.fn(),
            go: jest.fn(),
            goBack: jest.fn(),
            goForward: jest.fn(),
            block: jest.fn(),
            listen: jest.fn(),
            createHref: jest.fn()
        };//fake object 
        jest.spyOn(router, &#39;useHistory&#39;).mockImplementation(() =&gt;historyHistory);// try to mock hook
    });

    test(&#39;should match with snapshot&#39;, () =&gt; {
        const tree = mount(&lt;QuestionContainer /&gt;);

        expect(tree).toMatchSnapshot();
    });
});
```
Also i have tried use `jest.mock(&#39;react-router&#39;, () =&gt;({ useHistory: jest.fn() }));` but it still does not work.

How to mock useHistory hook in jest?

I have a React app, and I want to start writing unit tests with Enzyme. Enzyme&#39;s [documentation](https://enzymejs.github.io/enzyme/) discusses versions of React up to 16. 

In `src/setupTests.js` I currently have
```javascript
import Enzyme from &#39;enzyme&#39;;
import Adapter from &#39;enzyme-adapter-react-16&#39;;

Enzyme.configure({ adapter: new Adapter() });
```

But my app uses React version 17.0.1. **What enzyme adapter is there for React 17?**

Which Enzyme adapter works with React 17?

I&#39;m trying to simulate a `keyDown` event, specifically for Enter, `keyCode: 13`. I&#39;ve tried a number of different ways of doing this, but none of them are working. I&#39;ve also looked online and it seems like this feature is either buggy or not working in the current version of Enzyme. Does anyone know definitively if this feature works, and if so, what is the proper syntax for simulating an enter, or other types of key events? Thanks!

This is what I have currently, and it&#39;s not working:

    const input = wrapper.find(&#39;input&#39;);
    input.simulate(&#39;keyDown&#39;, {keyCode: 13});

My current Enzyme version is 2.4.1


How do you simulate an keyDown enter event (or others) in Enzyme?

I&#39;m writing a test using [Enzyme](https://github.com/airbnb/enzyme) for React.

My test is extremely straightforward:

    import OffCanvasMenu from &#39;../index&#39;;
    import { Link } from &#39;react-router&#39;;
    
    import expect from &#39;expect&#39;;
    import { shallow, mount } from &#39;enzyme&#39;;
    import sinon from &#39;sinon&#39;;
    import React from &#39;react&#39;;
    
    describe(&#39;&lt;OffCanvasMenu /&gt;&#39;, () =&gt; {
      it(&#39;contains 5 &lt;Link /&gt; components&#39;, () =&gt; {
        const wrapper = shallow(&lt;OffCanvasMenu /&gt;);
        expect(wrapper.find(&lt;Link /&gt;)).to.have.length(5);
      });
    });

This code is basically taken directly from [airbnb/enzyme docs](https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md), but returns the error:

    FAILED TESTS:
      &lt;OffCanvasMenu /&gt;
        ✖ contains 5 &lt;Link /&gt; components
          Chrome 52.0.2743 (Mac OS X 10.11.6)
        TypeError: Cannot read property &#39;have&#39; of undefined

I&#39;m a little unclear on what I&#39;m doing differently from the docs. Any guidance greatly appreciated.


React enzyme testing, Cannot read property &#39;have&#39; of undefined

Just what it says. Some example code:

    let wrapper = shallow(&lt;div&gt;&lt;button class=&#39;btn btn-primary&#39;&gt;OK&lt;/button&gt;&lt;/div&gt;);

    const b = wrapper.find(&#39;.btn&#39;); 
    
    expect(b.text()).to.be.eql(&#39;OK&#39;); // fail

Also the `html` method returns the contents of the element but also the element itself plus all the attributes, e.g. it gives `&lt;button class=&#39;btn btn-primary&#39;&gt;OK&lt;/button&gt;`. So I guess, worst case, I can call `html` and regex it, but...

Is there a way to just get the contents of the element, so I can assert on it. 

How to select element text with react+enzyme

I recently wanted to test that some custom method gets conditionally called in the `componentDidMount` method of a React component.

    componentDidMount() {
      if (this.props.initOpen) {
        this.methodName();
      }
    }

I&#39;m using Jest as my testing framework, which includes `jest.fn()` for mocks/spies.  I&#39;ve read that this would be fairly trivial to test with Sinon, by doing something like the following:

    sinon.spy(Component.prototype, &quot;methodName&quot;);
    const wrapper = mount(&lt;Component {...props} /&gt;);
    expect(wrapper.instance().methodName).toHaveBeenCalled();

I&#39;m trying to recreate this with Jest like so:

    Component.prototype.methodName = jest.fn();
    const wrapper = mount(&lt;Component {...props} /&gt;);
    expect(wrapper.instance().methodName).toHaveBeenCalled();

This code fails and throws the following error:

    jest.fn() value must be a mock function or spy.
    Received:
      function: [Function bound mockConstructor]

Is it possible to test this functionality with Jest? And if so, how?

How can I use Jest to spy on a method call?

Hy, I don&#39;t know how to mock an inline function in React component&#39;s child

My stack: `sinon`, `chai`, `enzyme`; 

Component usage:

    &lt;ListItem onClick={() =&gt; someFn()} /&gt;

Component&#39;s render:

    render() {
        return (
          &lt;li&gt;
            &lt;a href=&quot;#&quot; onClick={e =&gt; {
                e.preventDefault();
                this.props.onClick();
              }}
            &gt; whatever &lt;/a&gt;
          &lt;/li&gt;
        );
      }

Here we have `onClick` function that calls `e.preventDefault()`. How to tell to `&lt;a href&gt;`(`link`) to not to call `e.preventDefault()`? How can I mock an `onClick`?

Below is what I have tried in tests:

Shallow copy setup

    function setup() {
      const someFn = sinon.stub();
    
      const component = shallow(
        &lt;ListItem
          onClick={() =&gt; {
            someFn();
          }}
        /&gt;
      );
    
      return {
        component: component,
        actions: someFn,
        link: component.find(&#39;a&#39;),
        listItem: component.find(&#39;li&#39;),
      }
    }

And the test

      it(&#39;simulates click events&#39;, () =&gt; {
        const { link, actions } = setup();
        link.simulate(&#39;click&#39;); //Click on &lt;a href&gt;
        expect(actions).to.have.property(&#39;callCount&#39;, 1); //will be fine if we remove e.preventDefault()
      });

Test&#39;s output error:

    TypeError: Cannot read property &#39;preventDefault&#39; of undefined

How to mock e.preventDefault in react component&#39;s child

I&#39;m testing a React component with Jasmine Enzyme shallow rendering.

Simplified here for the purposes of this question...

    function MyOuterComponent() {
      return (
        &lt;div&gt;
          ...
          &lt;MyInnerComponent title=&quot;Hello&quot; /&gt;
          ...
          &lt;MyInnerComponent title=&quot;Good-bye&quot; /&gt;
          ...
        &lt;/div&gt;
      )
    }

`MyOuterComponent` has 2 instances of `MyInnerComponent` and I&#39;d like to test the props on each one.  

The first one I know how to test.  I use `find` with `first`...

    expect(component.find(&#39;MyInnerComponent&#39;).first()).toHaveProp(&#39;title&#39;, &#39;Hello&#39;);

However, I&#39;m struggling to test the second instance of `MyInnerComponent`.

I was hoping something like this would work...

    expect(component.find(&#39;MyInnerComponent&#39;).second()).toHaveProp(&#39;title&#39;, &#39;Good-bye&#39;);

or even this...

    expect(component.find(&#39;MyInnerComponent&#39;)[1]).toHaveProp(&#39;title&#39;, &#39;Good-bye&#39;);

But of course neither of the above work.  

I feel like I&#39;m missing the obvious.  

But when I look through the [docs](http://airbnb.io/enzyme/docs/api/shallow.html) I don&#39;t see an analogous example.

Anyone?

React Enzyme find second (or nth) node

prior to posting this question, I tried to search in sqa stackexchange but I found no post about shallow and render there, so I hope someone can help me out here.

When should I use shallow and render in testing react components?
Based on the airbnb docs, I&#39;ve made some opinions on the difference of the two:

1. Since shallow is testing components **as a unit**, so it should be used for &#39;parent&#39; components. (ex. Tables, Wrappers, etc.)

2. Render is for child components.

The reason I asked this question, is that I&#39;m having a hard time to figure out which one I should use (though the docs say that they&#39;re very similar)

So, how do I know which one to use in a specific scenario?

When should you use render and shallow in Enzyme / React tests?

Simulating a button click seems like a very easy/standard operation. Yet, I can&#39;t get it to work in Jest.js tests.

This is what I tried (and also doing it using jQuery), but it didn&#39;t seem to trigger anything:

    import { mount } from &#39;enzyme&#39;;

    page = &lt;MyCoolPage /&gt;;
    pageMounted = mount(page);

    const button = pageMounted.find(&#39;#some_button&#39;);
    expect(button.length).toBe(1); // It finds it alright
    button.simulate(&#39;click&#39;); // Nothing happens



Simulate a button click in Jest

I&#39;m confused about how to access `&lt;input&gt;` value when using `mount`. Here&#39;s what I&#39;ve got as my test:

      it(&#39;cancels changes when user presses esc&#39;, done =&gt; {
        const wrapper = mount(&lt;EditableText defaultValue=&quot;Hello&quot; /&gt;);
        const input = wrapper.find(&#39;input&#39;);
    
        console.log(input.render().attr(&#39;value&#39;));
        input.simulate(&#39;focus&#39;);
        done();
      });

The console prints out `undefined`. But if I slightly modify the code, it works:

      it(&#39;cancels changes when user presses esc&#39;, done =&gt; {
        const wrapper = render(&lt;EditableText defaultValue=&quot;Hello&quot; /&gt;);
        const input = wrapper.find(&#39;input&#39;);
    
        console.log(input.val());
        input.simulate(&#39;focus&#39;);
        done();
      });

Except, of course, the `input.simulate` line fails since I&#39;m using `render` now. I need both to work properly. How do I fix this?

**EDIT**:

I should mention, `&lt;EditableText /&gt;` is not a controlled component. But when I pass `defaultValue` into `&lt;input /&gt;`, it seems to set the value. The second code block above does print out the value, and likewise if I inspect the input element in Chrome and type `$0.value` in the console, it shows the expected value.

Enzyme - How to access and set &lt;input&gt; value?

Either I don&#39;t understand `dependencies` vs. `devDependencies` in node 100% yet or eslint is just wrong here (not capable of analyzing this correctly):

       3:1   error  &#39;chai&#39; should be listed in the project&#39;s dependencies, not devDependencies              import/no-extraneous-dependencies
       4:1   error  &#39;chai-enzyme&#39; should be listed in the project&#39;s dependencies, not devDependencies       import/no-extraneous-dependencies
       5:1   error  &#39;enzyme&#39; should be listed in the project&#39;s dependencies, not devDependencies            import/no-extraneous-dependencies
       7:1   error  &#39;sinon&#39; should be listed in the project&#39;s dependencies, not devDependencies             import/no-extraneous-dependencies
       9:1   error  &#39;redux-mock-store&#39; should be listed in the project&#39;s dependencies, not devDependencies  import/no-extraneous-dependencies



These are test dependencies, so why is it saying that they should be listed in `dependencies`?  

Additional note: We&#39;re using Travis as our CI so I don&#39;t know if it makes a difference for that at all either.

eslint should be listed in the project&#39;s dependencies, not devDependencies

I&#39;m using jest and enzyme with my create-react-app project. When I run `npm test`, I get an output that shows the names of the test files that passed but I&#39;d like the output to also include the names of the tests. 

Example: 

Button.test.js

    it (&#39;renders button&#39;, () =&gt; {
        const button = shallow(&lt;Button type=&quot;save&quot;/&gt;);
        expect(toJson(button)).toMatchSnapshot();
    });

Right now when I run npm test the output is just: 
&gt; PASS  src/Button.test.js&quot;

and the number of passed and failed tests (when the tests are successful). I would like the output to include &quot;renders button&quot; and any other test descriptions (like how the output looks when an rspec test is run). 

Is there an option to show all test descriptions when I run jest tests?

I have a mock module like this in my component test file

      jest.mock(&#39;../../../magic/index&#39;, () =&gt; ({
        navigationEnabled: () =&gt; true,
        guidanceEnabled: () =&gt; true
      }));

these functions will be called in render function of my component to hide and show some specific feature.

I want to take a snapshot on different combinations of the return value of those mock functions.

for suppose I have a test case like this

     it(&#39;RowListItem should not render navigation and guidance options&#39;, () =&gt; {
        const wrapper = shallow(
          &lt;RowListItem type=&quot;regularList&quot; {...props} /&gt;
        );
        expect(enzymeToJson(wrapper)).toMatchSnapshot();
      });


to run this test case I want to change the mock module functions return values to `false` like this dynamically

    jest.mock(&#39;../../../magic/index&#39;, () =&gt; ({
        navigationEnabled: () =&gt; false,
        guidanceEnabled: () =&gt; false
      }));
because i am importing `RowListItem` component already once so my mock module wont re import again. so it wont change. how can i solve this ?

how to change jest mock function return value in each test?

I am writing an integration test for for a React application, i.e. a test that tests many components together, and I want to mock any calls to external services.

The issue is that the test seems to execute before the async callback is executed causing my tests to fail.

Is there anyway around this? Can I somehow wait for call async code to finish?



Here is some bad **pseudo** code to illustrate my point.

I would like to test that when I mount Parent, its Child component render the content that came back from an external service, which i will mock.

&lt;!-- language: lang-javascript --&gt;

    class Parent extends component
    {
         render ()
         {
             &lt;div&gt;
                &lt;Child /&gt;
             &lt;/div&gt;
         }
    }
    class Child extends component
    {
         DoStuff()
         {
             aThingThatReturnsAPromise().then((result) =&gt; {
               Store.Result = result
             })
         }
    
        render()
        {
           DoStuff()
           return(&lt;div&gt;{Store.Result}&lt;/div&gt;)
    
    
        }
    }
    function aThingThatReturnsAPromise()
    {
         return new Promise(resolve =&gt;{
              eternalService.doSomething(function callback(result) {
                   resolve(result)
              }
        }
    
    }

When I do this in my test, it fails because the It gets executed before the callback gets fired.

&lt;!-- language: lang-javascript --&gt;

    jest.mock(&#39;eternalService&#39;, () =&gt; {
        return jest.fn(() =&gt; {
            return { doSomething: jest.fn((cb) =&gt; cb(&#39;fakeReturnValue&#39;);
        });
    });
    
    describe(&#39;When rendering Parent&#39;, () =&gt; {
        var parent;
    
        beforeAll(() =&gt; {
            parent = mount(&lt;Parent /&gt;)
        });
    
        it(&#39;should display Child with response of the service&#39;, () =&gt; {
            expect(parent.html()).toMatch(&#39;fakeReturnValue&#39;)
        });
    });


How do I test this? I understand angular resolves this with zonejs, is there an equivalent approach in React?


How to make Jest wait for all asynchronous code to finish execution before expecting an assertion

How do I check if a component is not present, i.e. that a specific component has not been rendered?

Jest - how to test if a component does not exist?

I have a `&lt;UserListComponent /&gt;` which outputs one `&lt;Contact /&gt;` component and list of contacts presentated by `&lt;Contacts /&gt;`. 

The problem is that in the test for `&lt;UserListComponent /&gt;` when I try to mount it, test outputs an error `Invariant Violation: You should not use &lt;Route&gt; or withRouter() outside a &lt;Router&gt; `

`withRouter()` is used in `&lt;Contacts /&gt;` component.

How can I mock `ContactsComponent` without router in test of parent component?

I found some similar issue https://www.bountysource.com/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-router
but it only describes situation when component is cover by `withRouter()` itself, not children.

**UserList.test.jsx**

    const mockResp = {
      count: 2,
      items: [
        {
          _id: 1,
          name: &#39;User1&#39;,
          email: &#39;email1@gmail.com&#39;,
          phone: &#39;+123456&#39;,
          online: false
        },
        {
          _id: 2,
          name: &#39;User2&#39;,
          email: &#39;email2@gmail.com&#39;,
          phone: &#39;+789123&#39;,
          online: false
        },
        {
          _id: 3,
          name: &#39;User3&#39;,
          email: &#39;email3@gmail.com&#39;,
          phone: &#39;+258369147&#39;,
          online: false
        }
      ],
      next: null
    }
    
    describe(&#39;UserList&#39;, () =&gt; {
      beforeEach(() =&gt; {
        fetch.resetMocks()
      });
    
      test(&#39;should output list of users&#39;, () =&gt; {
        fetch.mockResponseOnce(JSON.stringify(mockResp));
    
        const wrapper = mount(&lt;UserListComponent user={mockResp.items[2]} /&gt;);
        
        expect(wrapper.find(&#39;.contact_small&#39;)).to.have.length(3);
      });
    
    })


**UserList.jsx**

    export class UserListComponent extends PureComponent {
      render() {
        const { users, error } = this.state;
        return (
          &lt;React.Fragment&gt;
            &lt;Contact
              userName={this.props.user.name}
              content={this.props.user.phone}
            /&gt;
            {error ? &lt;p&gt;{error.message}&lt;/p&gt; : &lt;Contacts type=&quot;contactList&quot; user={this.props.user} contacts={users} /&gt;}
          &lt;/React.Fragment&gt;
        );
      }
    }


**Contacts.jsx**

    class ContactsComponent extends Component {
      constructor() {
        super();
        this.state = {
          error: null,
        };
      }
    
      render() {
        return (
          &lt;React.Fragment&gt;
            &lt;SectionTitle title=&quot;Contacts&quot; /&gt;
            &lt;div className=&quot;contacts&quot;&gt;
             //contacts
            &lt;/div&gt;
          &lt;/React.Fragment&gt;
        );
      }
    }
    
    export const Contacts = withRouter(ContactsComponent);

Jest, Enzyme: Invariant Violation: You should not use &lt;Route&gt; or withRouter() outside a &lt;Router&gt;

I have a simple Todo component that utilizes react-redux hooks that I&#39;m testing using enzyme but I&#39;m getting either an error or an empty object with a shallow render as noted below. 

What is the correct way to test components using hooks from react-redux?

**Todos.js**
```react
const Todos = () =&gt; {
  const { todos } = useSelector(state =&gt; state);

  return (
    &lt;ul&gt;
      {todos.map(todo =&gt; (
        &lt;li key={todo.id}&gt;{todo.title}&lt;/li&gt;
      ))}
    &lt;/ul&gt;
  );
};
```

**Todos.test.js** v1
```react
...

it(&#39;renders without crashing&#39;, () =&gt; {
  const wrapper = shallow(&lt;Todos /&gt;);
  expect(wrapper).toMatchSnapshot();
});

it(&#39;should render a ul&#39;, () =&gt; {
  const wrapper = shallow(&lt;Todos /&gt;);
  expect(wrapper.find(&#39;ul&#39;).length).toBe(1);
});
```

v1 Error:
``` 
...
Invariant Violation: could not find react-redux context value; 
please ensure the component is wrapped in a &lt;Provider&gt;
...
```

**Todos.test.js** v2
```react
...
// imported Provider from react-redux 

it(&#39;renders without crashing&#39;, () =&gt; {
  const wrapper = shallow(
    &lt;Provider store={store}&gt;
      &lt;Todos /&gt;
    &lt;/Provider&gt;,
  );
  expect(wrapper).toMatchSnapshot();
});

it(&#39;should render a ul&#39;, () =&gt; {
  const wrapper = shallow(&lt;Provider store={store}&gt;&lt;Todos /&gt;&lt;/Provider&gt;);
  expect(wrapper.find(&#39;ul&#39;).length).toBe(1);
});
```

v2 tests also fail since `wrapper` is the `&lt;Provider&gt;` and calling `dive()` on `wrapper` will return the same error as v1.

Thanks in advance for your help!

How to test a component using react-redux hooks?

I created a new React application by create-react-app and I wanted to write a unit test to a component named &quot;MessageBox&quot; that I created in the application. This is the unit test that I wrote: 

    import MessageBox from &quot;../MessageBox&quot;;
    import { shallow } from &#39;enzyme&#39;;
    import React from &#39;react&#39;;

    test(&#39;message box&#39;, () =&gt; {
       const app = {setState: jest.fn()};
       const wrapper = shallow(&lt;MessageBox app={app}/&gt;);
       wrapper.find(&#39;button&#39;).at(0).simulate(&#39;click&#39;);
       expect(app.setState).toHaveBeenLastCalledWith({modalIsOpen: false});
    });

I also added a file under &#39;src&#39; folder named &#39;setupTests.js&#39; with the content: 

    import * as enzyme from &#39;enzyme&#39;;
    import * as Adapter from &#39;enzyme-adapter-react-16&#39;;
    
    enzyme.configure({ adapter: new Adapter() });
     
I ran it by:

&gt; npm test

and I got the error: 

&gt; Enzyme Internal Error: Enzyme expects an adapter to be configured, but
&gt; found none. To configure an adapter, you should call `Enzyme.configure({ &gt; adapter: new Adapter() })`


Do you know what can solve this problem?

Enzyme expects an adapter to be configured

What is the difference between enzyme, ReactTestUtils and react-testing-library for react testing?

The ReactTestUtils documentation says:

&gt; ReactTestUtils makes it easy to test React components in the testing
&gt; framework of your choice.

The enzyme documentation just says:

&gt; Enzyme is a JavaScript Testing utility for React that makes it easier
&gt; to assert, manipulate, and traverse your React Components&#39; output.

React-testing-library documentation:

&gt; The react-testing-library is a very light-weight solution for testing
&gt; React components. It provides light utility functions on top of
&gt; react-dom.


Why is actually every solution easier and what can&#39;t be achieved with the other one?



Difference between enzyme, ReactTestUtils and react-testing-library

I am trying to unit test my reactjs component:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import React from &#39;react&#39;;
    import Modal from &#39;react-modal&#39;;
    import store from &#39;../../../store&#39;
    import lodash from &#39;lodash&#39;

    export class AddToOrder extends React.Component {
      constructor(props) {
        super(props);
        this.state = {checked: false}
        //debugger
      }
      checkBoxChecked() {
        return true
      }
      render() {
        console.log(&#39;testing=this.props.id&#39;,this.props.id )
        return (
          &lt;div className=&quot;order&quot;&gt;
            &lt;label&gt;
              &lt;input
                id={this.props.parent}
                checked={this.checkBoxChecked()}
                onChange={this.addToOrder.bind(this, this.props)}
                type=&quot;checkbox&quot;/&gt;
              Add to order
            &lt;/label&gt;
          &lt;/div&gt;
        )
      }
    }

    export default AddToOrder;

&lt;!-- end snippet --&gt;

Just to get started I am already struggling to assert the checkBoxChecked method:

&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import React from &#39;react-native&#39;;
    import {shallow} from &#39;enzyme&#39;;
    import {AddToOrder} from &#39;../app/components/buttons/addtoorder/addtoorder&#39;;
    import {expect} from &#39;chai&#39;;
    import {mount} from &#39;enzyme&#39;;
    import jsdom from &#39;jsdom&#39;;
    const doc = jsdom.jsdom(&#39;&lt;!doctype html&gt;&lt;html&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;&#39;)
    global.document = doc
    global.window = doc.defaultView

    let props;
    beforeEach(() =&gt; {
      props = {
        cart: {
          items: [{
            id: 100,
            price: 2000,
            name:&#39;Docs&#39;
          }]
        }
      };
    });

    describe(&#39;AddToOrder component&#39;, () =&gt; {
      it(&#39;should be handling checkboxChecked&#39;, () =&gt; {
        const wrapper = shallow(&lt;AddToOrder {...props.cart} /&gt;);
        expect(wrapper.checkBoxChecked()).equals(true); //error appears here
      });
    });

&lt;!-- end snippet --&gt;

```

How can I unit test a method on the component? This is the error I am getting:

    TypeError: Cannot read property &#39;checked&#39; of undefined



How to unit test a method of react component?

I&#39;m trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I should be able to use `spyOn` to do this: [spyOn](http://facebook.github.io/jest/docs/jest-object.html#jestspyonobject-methodname).

However, when I try this, I keep getting `TypeError: Cannot read property &#39;_isMockFunction&#39; of undefined` which I take to mean that my spy is undefined. My code looks like this:

    import React, { Component } from &#39;react&#39;;
    import logo from &#39;./logo.svg&#39;;
    import &#39;./App.css&#39;;
    class App extends Component {
    
      myClickFunc = () =&gt; {
          console.log(&#39;clickity clickcty&#39;)
      }
      render() {
        return (
          &lt;div className=&quot;App&quot;&gt;
            &lt;div className=&quot;App-header&quot;&gt;
              &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
              &lt;h2&gt;Welcome to React&lt;/h2&gt;
            &lt;/div&gt;
            &lt;p className=&quot;App-intro&quot; onClick={this.myClickFunc}&gt;
              To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
            &lt;/p&gt;
          &lt;/div&gt;
        );
      }
    }
    
    export default App;


and in my test file:

    import React from &#39;react&#39;;
    import ReactDOM from &#39;react-dom&#39;;
    import App from &#39;./App&#39;;
    import { shallow, mount, render } from &#39;enzyme&#39;

    describe(&#39;my sweet test&#39;, () =&gt; {
     it(&#39;clicks it&#39;, () =&gt; {
        const spy = jest.spyOn(App, &#39;myClickFunc&#39;)
        const app = shallow(&lt;App /&gt;)
        const p = app.find(&#39;.App-intro&#39;)
        p.simulate(&#39;click&#39;)
        expect(spy).toHaveBeenCalled()
     })
    })

Anyone have an insight into what I&#39;m doing wrong?

Jest spyOn function called

I have a component that makes use of `Animated` component from react native. I started writing a test case to simulate `onPress` of a component, which calls a function that has `Animated.timing` in it, and `setState`.

running `jest` works fine, but the tests never stops running, and one unrelated test case that I&#39;ve written before never seem to pass now (which passed before). 

running `jest --watch`, I get this error: 

    ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
    
          at Function.bezier (node_modules/react-native/Libraries/Animated/src/Easing.js:113:21)
          at ease (node_modules/react-native/Libraries/Animated/src/Easing.js:34:24)
          at TimingAnimation._easing (node_modules/react-native/Libraries/Animated/src/Easing.js:133:18)
          at TimingAnimation.onUpdate (node_modules/react-native/Libraries/Animated/src/animations/TimingAnimation.js:107:45)
    
     RUNS  src/__tests__/SlideDownMenu.test.js
    
    /home/nrion/Desktop/mobile-ui/PriceInsight_app/node_modules/react-native/Libraries/Animated/src/Easing.js:114
          return _bezier(x1, y1, x2, y2);
                 ^
    TypeError: _bezier is not a function
        at Function.bezier (/home/nrion/Desktop/mobile-ui/PriceInsight_app/node_modules/react-native/Libraries/Animated/src/Easing.js:224:12)
        at ease (/home/nrion/Desktop/mobile-ui/PriceInsight_app/node_modules/react-native/Libraries/Animated/src/Easing.js:94:21)
        at TimingAnimation._easing (/home/nrion/Desktop/mobile-ui/PriceInsight_app/node_modules/react-native/Libraries/Animated/src/Easing.js:255:16)
        at TimingAnimation.onUpdate (/home/nrion/Desktop/mobile-ui/PriceInsight_app/node_modules/react-native/Libraries/Animated/src/animations/TimingAnimation.js:138:14)
        at ontimeout (timers.js:386:11)
        at tryOnTimeout (timers.js:250:5)
        at Timer.listOnTimeout (timers.js:214:5)

## Link to repl
https://repl.it/repls/PartialGrimyMetadata

## Environment:

* OS: Linux 4.14
* Node: 6.14.2
* Yarn: 1.7.0
* npm: 3.10.10
* Watchman: Not Found
* Xcode: N/A
* Android Studio: Not Found



ReferenceError: You are trying to `import` a file after the Jest environment has been torn down

I have a react component(this is simplified in order to demonstrate the issue):

    class MyComponent extends Component {
        handleNameInput = (value) =&gt; {
            this.searchDish(value);
        };
        
        searchDish = (value) =&gt; {
          //Do something
        }
    
        render() {
            return(&lt;div&gt;&lt;/div&gt;)
        }
    }

Now I want to test that `handleNameInput()` calls `searchDish` with the provided value.

In order to do this I would like to create a [jest mock function][1] that replaces the component method.

Here is my test case so far:

    it(&#39;handleNameInput&#39;, () =&gt; {
       let wrapper = shallow(&lt;MyComponent/&gt;);
       wrapper.searchDish = jest.fn();
       wrapper.instance().handleNameInput(&#39;BoB&#39;);
       expect(wrapper.searchDish).toBeCalledWith(&#39;BoB&#39;);
    })

But all I get in the console is `SyntaxError`:

&gt; SyntaxError
&gt;       
&gt;       at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15)
&gt;       at run_xhr (node_modules/browser-request/index.js:215:7)
&gt;       at request (node_modules/browser-request/index.js:179:10)
&gt;       at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68)
&gt;       at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45)
&gt;       at Object.&lt;anonymous&gt; (src/main/react/tests/DishAdmin.test.js:122:24)


So my question is, how do I properly mock component methods with enzyme?


  [1]: https://facebook.github.io/jest/docs/api.html#jestfnimplementation

How to mock React component methods with jest and enzyme

So I&#39;m moving away from class based components to functional components but am stuck while writing test with jest/enzyme for the methods inside the functional components which explicitly uses hooks. Here is the stripped down version of my code.

    function validateEmail(email: string): boolean {
      return email.includes(&#39;@&#39;);
    }
    
    const Login: React.FC&lt;IProps&gt; = (props) =&gt; {
      const [isLoginDisabled, setIsLoginDisabled] = React.useState&lt;boolean&gt;(true);
      const [email, setEmail] = React.useState&lt;string&gt;(&#39;&#39;);
      const [password, setPassword] = React.useState&lt;string&gt;(&#39;&#39;);
    
      React.useLayoutEffect(() =&gt; {
        validateForm();
      }, [email, password]);
    
      const validateForm = () =&gt; {
        setIsLoginDisabled(password.length &lt; 8 || !validateEmail(email));
      };
    
      const handleEmailChange = (evt: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
        const emailValue = (evt.target as HTMLInputElement).value.trim();
        setEmail(emailValue);
      };
    
      const handlePasswordChange = (evt: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
        const passwordValue = (evt.target as HTMLInputElement).value.trim();
        setPassword(passwordValue);
      };
    
      const handleSubmit = () =&gt; {
        setIsLoginDisabled(true);
          // ajax().then(() =&gt; { setIsLoginDisabled(false); });
      };
    
      const renderSigninForm = () =&gt; (
        &lt;&gt;
          &lt;form&gt;
            &lt;Email
              isValid={validateEmail(email)}
              onBlur={handleEmailChange}
            /&gt;
            &lt;Password
              onChange={handlePasswordChange}
            /&gt;
            &lt;Button onClick={handleSubmit} disabled={isLoginDisabled}&gt;Login&lt;/Button&gt;
          &lt;/form&gt;
        &lt;/&gt;
      );
    
      return (
      &lt;&gt;
        {renderSigninForm()}
      &lt;/&gt;);
    };
    
    export default Login;

I know I can write tests for `validateEmail` by exporting it. But what about testing the `validateForm` or `handleSubmit` methods. If it were a class based components I could just shallow the component and use it from the instance as
```js
const wrapper = shallow(&lt;Login /&gt;);
wrapper.instance().validateForm()
```
But this doesn&#39;t work with functional components as the internal methods can&#39;t be accessed this way. Is there any way to access these methods or should the functional components be treated as a blackbox while testing?


Testing React Functional Component with Hooks using Jest

I am trying to test a style attribute for a React component. What is the best way to get style params in the test?

At this moment, my best option is to test if the HTML includes the string, but I think there is a better option.

Case:

    it(&#39;Should render large image when desktop&#39;, () =&gt; {
        const dummyUrl = &#39;http://dummyUrl&#39;;
        const wrapper = shallow(
          &lt;MockedStore
            initialState={{
              app: fromJS({ browser: { desktop: true } }),
            }}
          &gt;
            &lt;LandingHero bigImage={dummyUrl} /&gt;
          &lt;/MockedStore&gt;
        );
      });

The Component to test is:

    // @flow
    import React, { Component } from &#39;react&#39;;
    import gc from &#39;styles/core.scss&#39;;
    import $ from &#39;jquery&#39;;
    import DownloadButton from &#39;components/DownloadButton&#39;;
    import withStyles from &#39;isomorphic-style-loader/lib/withStyles&#39;;
    import DownArrow from &#39;components/DownArrow&#39;;
    import { connect } from &#39;react-redux&#39;;
    import type { Map } from &#39;immutable&#39;;
    import c from &#39;./styles.scss&#39;;
    
    @withStyles([gc, c])
    @connect(({ app }) =&gt; ({ app }))
    class LandingHero extends Component {
      componentDidMount() {
        if ($(window).height() &gt; 0) { // Necesary for webpack dev server
          $(this.hero).css(&#39;height&#39;, $(window).height() - 46);
        }
      }
    
      hero: HTMLElement;
    
      props: {
        app: Map&lt;string, any&gt;,
        copy: string,
        secondaryText: string,
        thirdText: string,
        bigImage?: string,
        smallImage: string,
      }
    
      render() {
        const { copy, secondaryText, thirdText } = this.props;
        const browser = this.props.app.has(&#39;browser&#39;) ? this.props.app.get(&#39;browser&#39;) : {};
        const backgroundImage = browser.desktop ? this.props.bigImage : this.props.smallImage;
    
        return (
          &lt;div
            className={`${c.hero} ${gc.textCenter}` +
            ` ${gc.alignMiddle} ${gc.alignCenter} ${gc.row} ${gc.expanded}`}
            ref={(hero) =&gt; { this.hero = hero; }}
            style={{
              margin: 0,
              position: &#39;relative&#39;,
              background: `linear-gradient(to bottom, rgba($ixdarkprimary, .3), rgba($ixdarkprimary, .3)), url(${backgroundImage || &#39;&#39;})`,
            }}
          &gt;
            &lt;div className={`${gc.row} ${gc.alignCenter} ${gc.alignMiddle} ${gc.column} ${gc.medium10}`}&gt;
              &lt;div className={`${gc.textCenter}`}&gt;
                &lt;div
                  className={`${gc.white} ${c.mainText} ${c.copy}`}
                &gt;
                  { copy }
                &lt;/div&gt;
                &lt;div className={`${gc.small6} ${gc.smallOffset3} ${gc.medium4} ${gc.mediumOffset4}`} style={{ marginBottom: 45 }}&gt;
                  &lt;DownloadButton /&gt;
                &lt;/div&gt;
                &lt;div className={`${gc.white} ${gc.fontBold} ${gc.font24}`}&gt;{secondaryText}&lt;/div&gt;
                &lt;p className={`${gc.white} ${gc.font20}`}&gt;{thirdText}&lt;/p&gt;
              &lt;/div&gt;
              &lt;DownArrow goTo=&quot;#content&quot; /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
    
    export default LandingHero;

How to test style for a React component attribute with Enzyme

I have a component that returns null in render under certain conditions:

    render() {
      if (this.props.isHidden) {
          return null;
      }
    
      return &lt;div&gt;test&lt;/div&gt;;
    }

I want to check if the component is null when isHidden is true with jest and enzyme:

    describe(&#39;myComp&#39;, () =&gt; {
        it(&#39;should not render if isHidden is true&#39;, () =&gt; {
            const comp = shallow(&lt;myComp isHidden={true} /&gt;);
            expect(comp.children().length).toBe(0);
        });
    });

This works but is there a more idiomatic way to write this test ? Testing for components that render as null is quite a common scenario.



All Enzyme Solutions on Gang of Coders

Total of 27 Enzyme Solutions