javascript - How to test onKeyPress function call - React Testing Library - Stack Overflow

admin管理员组

文章数量:1355564

How would I be able to test the functionality of my onkeypress functionality?

• current onkeypress function is inserted in element.

• Trying to test how to test function onkeypress was called input box?

• How to test what it was it called with?

• jest, react-testing-library, and react

any help would be greatly appreciated!

Component -

    import React, { useState } from 'react';

    function Search({ setWeather }) {
      const [city, setCity] = useState('');

      async function getWeather(e) {
        if (e.key === 'Enter') {
          e.preventDefault();
          e.target.blur();
          console.log('in here');
          try {
            const key = process.env.REACT_APP_API_KEY;
            const uri = `APIURIHERE`;
            const response = await fetch(uri);
            const responseJson = await response.json();
            setWeather(responseJson);
            setCity('');
          } catch (error) {
            console.log('api error', error);
          }
        }
      }

      return (
        <div>
          <label htmlFor='search-box'>
            <input
              data-testid='location-input'
              id='search-box'
              type='text'
              placeholder='search city'
              value={city}
              onChange={(e) => setCity(e.target.value)}
              onKeyPress={(e) => getWeather(e)}
            />
          </label>
        </div>
      );
    }

    export default Search;

Test -

    import React from 'react';
    import { render, cleanup, fireEvent } from '@testing-library/react';
    import Search from '../Search';

    afterEach(cleanup);
    const mock = jest.fn();

    describe('<Search/>', () => {
      test('onkeypress - function runs', () => {
        const { getByTestId } = render(<Search setWeather={mock} />);
        const inputNode = getByTestId('location-input');
        fireEvent.change(inputNode, { target: { value: 'city_here' } });
        expect(inputNode.value).toBe('city_here');
        fireEvent.keyPress(inputNode, { key: 'Enter', keyCode: 13 });
        // how to test function onkeypress was called inputbox?
        // and how to test what it was it called with?
      });
    });

How would I be able to test the functionality of my onkeypress functionality?

• current onkeypress function is inserted in element.

• Trying to test how to test function onkeypress was called input box?

• How to test what it was it called with?

• jest, react-testing-library, and react

any help would be greatly appreciated!

Component -

    import React, { useState } from 'react';

    function Search({ setWeather }) {
      const [city, setCity] = useState('');

      async function getWeather(e) {
        if (e.key === 'Enter') {
          e.preventDefault();
          e.target.blur();
          console.log('in here');
          try {
            const key = process.env.REACT_APP_API_KEY;
            const uri = `APIURIHERE`;
            const response = await fetch(uri);
            const responseJson = await response.json();
            setWeather(responseJson);
            setCity('');
          } catch (error) {
            console.log('api error', error);
          }
        }
      }

      return (
        <div>
          <label htmlFor='search-box'>
            <input
              data-testid='location-input'
              id='search-box'
              type='text'
              placeholder='search city'
              value={city}
              onChange={(e) => setCity(e.target.value)}
              onKeyPress={(e) => getWeather(e)}
            />
          </label>
        </div>
      );
    }

    export default Search;

Test -

    import React from 'react';
    import { render, cleanup, fireEvent } from '@testing-library/react';
    import Search from '../Search';

    afterEach(cleanup);
    const mock = jest.fn();

    describe('<Search/>', () => {
      test('onkeypress - function runs', () => {
        const { getByTestId } = render(<Search setWeather={mock} />);
        const inputNode = getByTestId('location-input');
        fireEvent.change(inputNode, { target: { value: 'city_here' } });
        expect(inputNode.value).toBe('city_here');
        fireEvent.keyPress(inputNode, { key: 'Enter', keyCode: 13 });
        // how to test function onkeypress was called inputbox?
        // and how to test what it was it called with?
      });
    });

• javascript
• reactjs
• testing
• react-testing-library
• onkeypress

Share Improve this question Follow asked Jul 4, 2020 at 0:08 bkDevbkDev 2111 gold badge11 silver badge33 bronze badges 2

• 1 In order to avoid confusion, are you indicating that fireEvent.keyPress is not working or are you trying to figure out if setWeather was called? – themanatuf Commented Jul 9, 2020 at 9:55
• "How to test what it was it called with?" you don't--this is an implementation detail, or if you're referring to the DOM event object, something your test provides as a mock. Instead, test the effect clicking the button has on the user interface. In this case, you would test that the weather was retrieved. But since this is never rendered in this ponent, it can't be tested. You'd probably want to test wherever ponent controls the weather state. As far as city goes, you can test that clicking the button clears it out. – ggorlen Commented Nov 6, 2022 at 3:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

According to this Github issue, a charCode param needs to be included with the keyPress method call: fireEvent.keyPress(inputNode, { key: 'Enter', charCode: 13 });

本文标签： javascriptHow to test onKeyPress function callReact Testing LibraryStack Overflow