单击fireEvent时如何测试Redux表单?

时间:2019-09-06 07:26:47

标签: redux-form react-testing-library

我正在尝试编写一些测试,并使用react-testing-library测试我的redux表单。没问题,要安装组件并测试一些元素,但是一旦我尝试使用fireEvent模拟动作,我就会出错。

这里是我用来包装经过测试的组件的提供程序。

const ProviderWrapper = ({ children, store }) => (
    <Provider store={store}>
        <ConnectedRouter history={history}>
            { children }
        </ConnectedRouter>
    </Provider>
)

const withProvider = ({children}) => {
    return (
        <ProviderWrapper store={store}>
            { children }
        </ProviderWrapper>
    )}


export default withProvider

Here are my test. The first one pass, but the second failed with the error previously describe.It only happen when i use the fireEvent Function.

describe('Filter Sector', () => {
    afterEach(cleanup);

    const mockFilterSector = {
        name:'Secteur d\'activité',
        formPropertyName:'sector',
        options:[{name:"test", value:"test"}, {name:"test1", value:"test2"}]
    };

    const Form = () => {

        //const state = useSelector(state => state);
        const handleSubmit = () => {
            console.log("HandleSubmit::")
        };
        return (
            <form onSubmit={handleSubmit}>
                <FilterSelect
                    {...mockFilterSector}
                />
            </form>
        )
    };

    describe('Default', () => {
        it('the filter element should be Secteur d\' activité when nothing is selected', () => {
            const { getByText } = render(<WithProvider><Form /></WithProvider>);
            const text = getByText(mockFilterSector.name);
            expect(text).toBeDefined();
        });

        it('on click it should display all it s element', async () => {
            const { asFragment, getByText } = render(<WithProvider><Form /></WithProvider>);
            console.log("AsFragment::", asFragment());
            expect(getByText(mockFilterSector.name)).toBeDefined();
            const element = getByText(mockFilterSector.name);

            fireEvent.click(element);

            //rerender(<WithProvider><Form /></WithProvider>);
            const text = getByText('test');
            expect(text).toBeDefined();   
        });
    })
});

我希望我的考试通过,但实际错误为

  

“字段必须在用reduxForm()装饰的组件内部”

仅在第二次测试中发生。第一次通过。

0 个答案:

没有答案