如何使用@testing-library/react 和 react-test-renderer 测试由 Redux 状态控制的输入值？

Question

Using @testing-library/react,I am trying to test whether the input value is being by fireEvent or not. But Facing a problem, its always returning blank.As the value is controlled by the redux store.

Here is the code:

<div ref={typeAheadRef} className={`dropdown${isOpen ? ' show' : ''}`} data-testid="searchContent">
            <InputGroup>
              <InputGroup.Prepend>
                <InputGroup.Text>
                  <img className="icon" src={SearchIcon} alt="search-icon" />
                </InputGroup.Text>
              </InputGroup.Prepend>
              <FormControl
                data-testid="search-input"
                ref={typeAheadInputRef}
                onInput={typeAheadInputHandler}
                onBlur={handleBlurEvent}
                value={props.searchValue}
                type="text"
                as="input"
                id="search-input"
                autoFocus
                autoComplete="off"
              />
            </InputGroup>
            {clearButton && (
              <Button
                data-testid="Close"
                type="button"
                className="close"
                aria-label="Close"
                onClick={handleClearSearch}
              >
                <span aria-hidden="true">&times;</span>
              </Button>
            )}
</div> 

This is the change Method(i'm using OnInput attribute for onChange and copy paste functionality)

const typeAheadInputHandler = event => {
    typeAheadInputRef.current.value = event.target.value;
    if (typeAheadInputRef.current.value !== '' &&
      typeAheadInputRef.current.value.length > 0) {
      setClearButton(true);
    } else {
      setClearButton(false);
    }

    props.handleTypeAheadOnSearch(typeAheadInputRef.current.value.trimStart());// method in parent component that sets search value

Parent component function:

const handleTypeAheadOnSearch = (query) => {
  props.setSearchValue(query); //updates the store value
}

Test.js

import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render, fireEvent, getByTestId } from '@testing-library/react';
import ShallowRenderer from 'react-test-renderer/shallow';
import { DEFAULT_LOCALE } from '../../../i18n';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

import SearchBar from '../index';
import StudentData from './data/StudentData';
import {
    getTypeAheadSearchStudentList,
    setSearchValue,
    setSearchValueEmpty,
    filterOutSearchStudents,
    openSearchDisplay,
    closeSearchDisplay,
} from '../../../containers/App/actions';
import { debug } from 'util';

const { IntlProvider } = jest.requireActual('react-intl');

const renderer = new ShallowRenderer();

const searchSetUp = () => {
    const handleTypeAheadOnSearch = jest.fn();
    const handleTypeAheadOnSelected = jest.fn();
    const handleSearchSubmit = jest.fn();
    const handleClearSubmit = jest.fn();

    const { container } = render(
        <SearchBar
            {...StudentData}
            handleTypeAheadOnSearch={handleTypeAheadOnSearch}
            handleTypeAheadOnSelected={handleTypeAheadOnSelected}
            handleSearchSubmit={handleSearchSubmit}
            handleClearSubmit={handleClearSubmit}
            showCourseValue={StudentData.showCourseSearchValue}
            setSearchValueEmpty={() => {
                setSearchValueEmpty();
            }}
        />,
    );
    return container;
};

describe('<Search>', () => {

    it('Should render and match the snapshot', () => {
        renderer.render(<SearchBar />);
        const renderedOutput = renderer.getRenderOutput();
        expect(renderedOutput).toMatchSnapshot();
    });

    it('renders Search component correctly', () => {
        const handleTypeAheadOnSearch = jest.fn();
        const handleTypeAheadOnSelected = jest.fn();
        const handleSearchSubmit = jest.fn();
        const handleClearSubmit = jest.fn();

        render(
        <IntlProvider locale={DEFAULT_LOCALE}>
            <SearchBar
                {...StudentData}
                handleTypeAheadOnSearch={handleTypeAheadOnSearch}
                handleTypeAheadOnSelected={handleTypeAheadOnSelected}
                handleSearchSubmit={handleSearchSubmit}
                handleClearSubmit={handleClearSubmit}
                showCourseValue={StudentData.showCourseSearchValue}
                setSearchValueEmpty={() => {
                    setSearchValueEmpty();
                }}
            />
        </IntlProvider>
        );
    });

    it('should render the search component', () => {
        const container = searchSetUp();
        const searchIcon = getByTestId(container, 'searchIcon');
        expect(searchIcon.textContent).toBe('');
    });

    it('Search icon is clicked and shows the text box', () => {
        const container = searchSetUp();
        const searchIcon = getByTestId(container, 'searchIcon');
        fireEvent.click(searchIcon);
        const searchContent = getByTestId(container, 'searchContent');
        expect(searchContent.textContent).toBe('No matching students found.');
    });

    it('Show Close icon on type', () => {
        const container = searchSetUp();
        const searchIcon = getByTestId(container, 'searchIcon');
        fireEvent.click(searchIcon);
        const input = getByTestId(container, 'search-input');
        fireEvent.change(input, { target: { value: 'stu' } });
        expect(input.value).toBe('stu');
        console.log(input.value);// blank 
    });
});

Really Need help on this.

Answer 1

What you can do is make your own small store for your test. You just need to :

• import your reducer
• const store = createStore(myReducer)
• put a <Provider store={store}> on you tested component