Question

使用@ testing-library / react，我正在尝试测试输入值是否由fireEvent提供。但是面对一个问题，它总是返回空白。因为该值由redux存储区控制。

这是代码：

<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>

这是更改方法（我将OnInput属性用于onChange和复制粘贴功能）

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

父组件功能：

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

真的需要帮助。

Answer 1

您可以做的是建立自己的小商店进行测试。您只需要：

导入减速器
const store = createStore(myReducer)
在您测试的组件上放置<Provider store={store}>

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

1 个答案: