I need some help understanding how one can test an application using `React` `Context`.

Here&#39;s my sample setup.

**context.js**

    import React from &#39;react&#39;
    
    export const AppContext = React.createContext()

**App.js**

    import React from &#39;react&#39;
    
    import MyComponent from &#39;./MyComponent&#39;
    import {AppContext} from &#39;./context&#39;
    
    const App extends React.Component {
    
      state = {
        items: []
      }
    
      handleItemAdd = newItem =&gt; {
        const {items} = this.state
        items.push(newItem)
        this.setState(items)
      }
    
      render() {
        return (
          &lt;AppContext.Provider value={{
            addItem: this.handleItemAdd
          }}&gt;
            &lt;MyComponent /&gt;
          &lt;/AppContext.Provider&gt;
        )
      }
    }
    
    export default App

**MyComponent.js**

    import React from &#39;react&#39;
    
    import {AppContext} from &#39;./context&#39;
    
    const MyComponent extends React.Component {    
      render() {
        return (
          &lt;AppContext.Consumer&gt;
            {addItem =&gt; 
              &lt;button onClick={() =&gt; addItem(&#39;new item&#39;)}&gt;
                Click me
              &lt;/button&gt;
            }
          &lt;/AppContext.Consumer&gt;
        )
      }
    }
    
    export default MyComponent

This is a simplified example. Imagine that there are more layers between `App` and `MyComponent`, hence the use of `React` `Context`.

And here&#39;s my test file for `MyComponent`.

**MyComponent.test.js**

    import React from &#39;react&#39;
    import {render, fireEvent} from &#39;react-testing-library&#39;
    
    test(&#39;component handles button click&#39;, () =&gt; {
      const {getByText} = render(
        &lt;MyComponent /&gt;
      )
      const button = getByText(&#39;Click me&#39;)
      fireEvent.click(button)
      expect...?
    }

The thing is, `AppContext.Consumer` is part of the implementation of `MyComponent`, so in this test I don&#39;t have direct access to it. How do I mock `AppContext.Consumer` so I am actually able to verify that clicking a button fires a function call?

I know that in theory I can test this by rendering `MyComponent` in my `App`, but I want to write a unit test for `MyComponent` only.

Jest mock react context

App.js

    import React, { Component } from &quot;react&quot;;
    import Select from &quot;react-select&quot;;
    
    const SELECT_OPTIONS = [&quot;FOO&quot;, &quot;BAR&quot;].map(e =&gt; {
      return { value: e, label: e };
    });
    
    class App extends Component {
      state = {
        selected: SELECT_OPTIONS[0].value
      };
    
      handleSelectChange = e =&gt; {
        this.setState({ selected: e.value });
      };
      
      render() {
        const { selected } = this.state;
        const value = { value: selected, label: selected };
        return (
          &lt;div className=&quot;App&quot;&gt;
            &lt;div data-testid=&quot;select&quot;&gt;
              &lt;Select
                multi={false}
                value={value}
                options={SELECT_OPTIONS}
                onChange={this.handleSelectChange}
              /&gt;
            &lt;/div&gt;
            &lt;p data-testid=&quot;select-output&quot;&gt;{selected}&lt;/p&gt;
          &lt;/div&gt;
        );
      }
    }
    
    export default App;

App.test.js

    import React from &quot;react&quot;;
    import {
      render,
      fireEvent,
      cleanup,
      waitForElement,
      getByText
    } from &quot;react-testing-library&quot;;
    import App from &quot;./App&quot;;
    
    afterEach(cleanup);
    
    const setup = () =&gt; {
      const utils = render(&lt;App /&gt;);
      const selectOutput = utils.getByTestId(&quot;select-output&quot;);
      const selectInput = document.getElementById(&quot;react-select-2-input&quot;);
      return { selectOutput, selectInput };
    };
    
    test(&quot;it can change selected item&quot;, async () =&gt; {
      const { selectOutput, selectInput } = setup();
      getByText(selectOutput, &quot;FOO&quot;);
      fireEvent.change(selectInput, { target: { value: &quot;BAR&quot; } });
      await waitForElement(() =&gt; getByText(selectOutput, &quot;BAR&quot;));
    });

This minimal example works as expected in the browser but the test fails.  I think the onChange handler in &lt;Select /&gt; is not invoked.  How can I trigger the onChange callback in the test?  What is the preferred way to find the element to fireEvent at?  Thank you

how to test react-select with react-testing-library

## Current Working Solution

Using this html:

```html
&lt;p data-testid=&quot;foo&quot;&gt;Name: &lt;strong&gt;Bob&lt;/strong&gt; &lt;em&gt;(special guest)&lt;/em&gt;&lt;/p&gt;
```

I can use the [React Testing Library](https://github.com/kentcdodds/react-testing-library) `getByTestId` method to find the `textContent`:

```
expect(getByTestId(&#39;foo&#39;).textContent).toEqual(&#39;Name: Bob (special guest)&#39;)

```

## Is there a better way?

I would like to simply use this html:

```html
&lt;p&gt;Name: &lt;strong&gt;Bob&lt;/strong&gt; &lt;em&gt;(special guest)&lt;/em&gt;&lt;/p&gt;
```

And use [React Testing Library](https://github.com/kentcdodds/react-testing-library)&#39;s `getByText` method like this:

```
expect(getByText(&#39;Name: Bob (special guest)&#39;)).toBeTruthy()
```

But this does not work.

## So, the question…

Is there a simpler way to use React Testing Library to find strings of text content with the tags striped out?

How to query by text string which contains html tags using React Testing Library?

I am new to react-testing-library / jest and attempting to write a test to see if the navigation of routes (using react-router-dom) is performed correctly.  So far I have been following the [README][1] and this [tutorial][2] on how to use.

One of my components uses scrollIntoView in a local function and this causes the test to fail.  

    TypeError: this.messagesEnd.scrollIntoView is not a function

      45 |
      46 |     scrollToBottom = () =&gt; {
    &gt; 47 |         this.messagesEnd.scrollIntoView({ behavior: &quot;smooth&quot; });
         |                          ^
      48 |     }
      49 |
      50 | 

This is the function in my chatbot component:

    componentDidUpdate() {
        this.scrollToBottom();
    }

    scrollToBottom = () =&gt; {
        this.messagesEnd.scrollIntoView({ behavior: &quot;smooth&quot; });
    }

And this is a sample of the tests that fail:

    test(&#39;&lt;App&gt; default screen&#39;, () =&gt; {

        const { getByTestId, getByText } = renderWithRouter(&lt;App /&gt;)
    
        expect(getByTestId(&#39;index&#39;))

        const leftClick = {button: 0}
        fireEvent.click(getByText(&#39;View Chatbot&#39;), leftClick) &lt;-- test fails

        expect(getByTestId(&#39;chatbot&#39;))
    
    })

I have tried to use a mock function, however the error still remains.

This is where this.messageEnd is assigned:

        &lt;div className=&quot;chatbot&quot;&gt;
            &lt;div className=&quot;chatbot-messages&quot;&gt;
                //render messages here
            &lt;/div&gt;
            &lt;div className=&quot;chatbot-actions&quot; ref={(el) =&gt; { this.messagesEnd = el; }}&gt;
                //inputs for message actions here
            &lt;/div&gt;
        &lt;/div&gt;

I referenced code from this stack overflow question: [How to scroll to bottom in react?][3]

**SOLUTION**

    test(&#39;&lt;App&gt; default screen&#39;, () =&gt; {

        window.HTMLElement.prototype.scrollIntoView = function() {};

        const { getByTestId, getByText } = renderWithRouter(&lt;App /&gt;)

        expect(getByTestId(&#39;index&#39;))

        const leftClick = {button: 0}
        fireEvent.click(getByText(&#39;View Chatbot&#39;), leftClick)

        expect(getByTestId(&#39;chatbot&#39;))

    })


  [1]: https://github.com/kentcdodds/react-testing-library
  [2]: https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-router.js
  [3]: https://stackoverflow.com/questions/37620694/how-to-scroll-to-bottom-in-react

TypeError: scrollIntoView is not a function

Here is my custom hook:

````
  export function useClientRect() {
    const [scrollH, setScrollH] = useState(0);
    const [clientH, setClientH] = useState(0);
    const ref = useCallback(node =&gt; {
      if (node !== null) {
        setScrollH(node.scrollHeight);
        setClientH(node.clientHeight);
      }
    }, []);
    return [scrollH, clientH, ref];
  }
}
````

I want each time that it is called, it return my values. like:

````
jest.mock(&#39;useClientRect&#39;, () =&gt; [300, 200, () =&gt; {}]);
```` 

How can I achieve this?

How to mock react custom hook returned value?

I have a component library that I&#39;m writing unit tests for using Jest and react-testing-library. Based on certain props or events I want to verify that certain elements aren&#39;t being rendered.

`getByText`, `getByTestId`, etc throw and error in `react-testing-library` if the element isn&#39;t found causing the test to fail before the `expect` function fires.

How do you test for something not existing in jest using react-testing-library?

How do you test for the non-existence of an element using jest and react-testing-library?

I am totally new to JavaScript testing and am working in a new codebase. I would like to write a test that is checking for a className on the element. I am working with Jest and *[React Testing Library][1]*. Below I have a test that will render a button based on the `variant` prop. It also contains a className and I would like to test that.

    it(&#39;Renders with a className equal to the variant&#39;, () =&gt; {
        const { container } = render(&lt;Button variant=&quot;default&quot; /&gt;)
        expect(container.firstChild) // Check for className here
    })

I tried to google for a property like Enzyme has with `hasClass`, but I couldn&#39;t find anything. How can I solve this with the current libraries (*React Testing Library* and Jest)?

  [1]: https://testing-library.com/docs/react-testing-library/intro/




How to test a className with the Jest and React testing library

Here is my code for a tooltip that toggles the CSS property `display: block` on MouseOver and on Mouse Out `display: none`.

     it(&#39;should show and hide the message using onMouseOver and onMouseOut events respectively&#39;, () =&gt; {
        const { queryByTestId, queryByText } = render(
          &lt;Tooltip id=&quot;test&quot; message=&quot;test&quot; /&gt;,
        )
        fireEvent.mouseOver(queryByTestId(&#39;tooltip&#39;))
        expect(queryByText(&#39;test&#39;)).toBeInTheDocument()
        fireEvent.mouseOut(queryByTestId(&#39;tooltip&#39;))
        expect(queryByText(&#39;test&#39;)).not.toBeInTheDocument()
        cleanup()
      })

I keep getting the error  TypeError: expect(...).toBeInTheDocument is not a function


Has anyone got any ideas why this is happening? My other tests to render and snapshot the component all work as expected. As do the queryByText and queryByTestId. 


react-testing-library why is toBeInTheDocument() not a function

I have a React component that generates a button whose content contains a `&lt;span&gt;` element like this one:
```
function Click(props) {
    return (
        &lt;button disable={props.disable}&gt;
            &lt;span&gt;Click me&lt;/span&gt;
        &lt;/button&gt;
    );
}
```

I want to test the logic of this component with the use of `react-testing-library` and `mocha` + `chai`.

The problem at which I stuck at the moment is that the `getByText(&quot;Click me&quot;)` selector returns the `&lt;span&gt;` DOM node, but for the tests, I need to check the `disable` attribute of the `&lt;button&gt;` node. What is the best practice for handling such test cases? I see a couple of solutions, but all of them sound a little bit off:

1. Use `data-test-id` for `&lt;button&gt;` element
2. Select one of the ancestors of the `&lt;Click /&gt;` component and then select the button `within(...)` this scope
3. Click on the selected element with `fireEvent` and check that nothing has happened

Can you suggest a better approach?

Check that button is disabled in react-testing-library

I am trying to test my anchor tag. Once I click it, I want to see if the `window.location.href` is what I expect.

I&#39;ve tried to render the anchor, click it, and then test `window.location.href`:

```js
test(&#39;should navigate to ... when link is clicked&#39;, () =&gt; {
  const { getByText } = render(&lt;a href=&quot;https://test.com&quot;&gt;Click Me&lt;/a&gt;);

  const link = getByText(&#39;Click Me&#39;);

  fireEvent.click(link);

  expect(window.location.href).toBe(&quot;https://www.test.com/&quot;);
});
```

I am expecting the test to pass, but instead the window.location.href is just `&quot;http://localhost/&quot;` meaning it is not getting updated for whatever reason. I even tried wrapping my expect with `await wait`, but that didn&#39;t work either. I can&#39;t find much information about testing anchors with `react-testing-library`. Maybe there is even a better way to test them than what I am doing. &#129335;‍♂️

How to test anchor&#39;s href with react-testing-library

I am using react jest with react testing library to test my component. 
I am facing a weird issue. I am usng debug return by render from testing-library.


    test(&#39;component should work&#39;, async () =&gt; {
      const { findByText, debug } = render(&lt;MyComponent /&gt;);
      const myElement = await findByText(/someText/i);
      debug();
    
    });


[![enter image description here][1]][1]

As you can see in the screenshot there are incomplete dev and closing tags for parents are missing.

  [1]: https://i.stack.imgur.com/OFO6S.png

react-testing-library: some portion of debug&#39;s output is not visible

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&#39;m using [react-testing-libarary](https://github.com/kentcdodds/react-testing-library) to test my react application. For some reason, I need to be able to find the element by `id` and not `data-testid`. There is no way to achieve this in the documentation.

Is there a way to achieve this?

I&#39;ve the rendered output as:

    const dom = render(&lt;App /&gt;);

I&#39;m looking for something in line of:

    const input = dom.getElemenById(&#39;firstinput&#39;);
    //or 
    const input = dom.getById(&#39;firstinput&#39;);

Find element by id in react-testing-library

I&#39;m working with a simple component that does a side effect. My test passes, but I&#39;m getting the warning `Warning: An update to Hello inside a test was not wrapped in act(...).`.

I&#39;m also don&#39;t know if `waitForElement` is the best way to write this test.

**My component**

```javascript
export default function Hello() {
  const [posts, setPosts] = useState([]);
  
  useEffect(() =&gt; {
    const fetchData = async () =&gt; {
      const response = await axios.get(&#39;https://jsonplaceholder.typicode.com/posts&#39;);
      setPosts(response.data);
    }
    
    fetchData();
  }, []);
  
  return (
    &lt;div&gt;
      &lt;ul&gt;
        {
          posts.map(
            post =&gt; &lt;li key={post.id}&gt;{post.title}&lt;/li&gt;
          )
        }
      &lt;/ul&gt;
    &lt;/div&gt;
  )
}

```

**My component test**

```javascript
import React from &#39;react&#39;;
import {render, cleanup, act } from &#39;@testing-library/react&#39;;
import mockAxios from &#39;axios&#39;;
import Hello from &#39;.&#39;;

afterEach(cleanup);

it(&#39;renders hello correctly&#39;, async () =&gt; {
  mockAxios.get.mockResolvedValue({
    data: [
        { id: 1, title: &#39;post one&#39; },
        { id: 2, title: &#39;post two&#39; },
      ],
  });

  const { asFragment } = await waitForElement(() =&gt; render(&lt;Hello /&gt;));
  
  expect(asFragment()).toMatchSnapshot();
});
```

How to solve the &quot;update was not wrapped in act()&quot; warning in testing-library-react?

I&#39;m using the `getByTestId` function in React Testing Library: 

&lt;!-- language: lang-js --&gt;

    const button = wrapper.getByTestId(&quot;button&quot;);
    expect(heading.textContent).toBe(&quot;something&quot;);

Is it possible / advisable to search for HTML elements instead? So something like this:

&lt;!-- language: lang-js --&gt;

    const button = wrapper.getByHTML(&quot;button&quot;);
    const heading = wrapper.getByHTML(&quot;h1&quot;);


All React Testing-Library Solutions on Gang of Coders

Total of 15 React Testing-Library Solutions