diff --git a/src/ReactMUIDatatableProvider.js b/src/ReactMUIDatatableProvider.js index 906b97e..6289727 100644 --- a/src/ReactMUIDatatableProvider.js +++ b/src/ReactMUIDatatableProvider.js @@ -1,4 +1,4 @@ -import { createStoreConsumer } from 'effector-react'; +import { useStore } from 'effector-react'; import PropTypes from 'prop-types'; import React, { createContext, useEffect, useMemo } from 'react'; import defaultToolbarSelectActions from './defaultToolbarSelectActions'; @@ -66,27 +66,23 @@ const ReactMUIDatatableProvider = props => { [] ); - const EffectorStore = useMemo(() => createStoreConsumer($store), []); + const state = useStore($store); useEffect(() => subscribe(props.onStateChanged), []); return ( - - {state => ( - - {props.children} - - )} - + + {props.children} + ); }; diff --git a/test/ReactMUIDatatableProvider.test.js b/test/ReactMUIDatatableProvider.test.js index d65d218..2d35629 100644 --- a/test/ReactMUIDatatableProvider.test.js +++ b/test/ReactMUIDatatableProvider.test.js @@ -1,10 +1,10 @@ import React from 'react'; -import renderer from 'react-test-renderer'; +import { act, create } from 'react-test-renderer'; import ReactMUIDatatableProvider, { ReactMUIDatatableContext, } from '../src/ReactMUIDatatableProvider'; -let ReactMUIDatatable; +let ReactMUIDatatableTestRendererInstance; let RenderedMockedComponent; let data; let columns; @@ -70,7 +70,7 @@ describe('ReactMUIDatatableProvider', () => { { name: 'car.make', label: 'Car make' }, ]; - ReactMUIDatatable = props => ( + const ReactMUIDatatable = props => ( {datatableProps => } @@ -78,15 +78,19 @@ describe('ReactMUIDatatableProvider', () => { ); - RenderedMockedComponent = renderer - .create( + act(() => { + ReactMUIDatatableTestRendererInstance = create( - ) - .root.findByType(MockedComponent); + ); + }); + + RenderedMockedComponent = ReactMUIDatatableTestRendererInstance.root.findByType( + MockedComponent + ); }); it('should return default toolbarSelectActions with delete icon if this prop was not received', () => { @@ -94,9 +98,11 @@ describe('ReactMUIDatatableProvider', () => { {} ); - const tree = renderer.create(ToolbarSelectActions); + const ToolbarSelectActionsTestRendererInstance = create( + ToolbarSelectActions + ); - expect(tree).toMatchSnapshot(); + expect(ToolbarSelectActionsTestRendererInstance).toMatchSnapshot(); }); it('should return string for selectedData localization', () => { @@ -119,19 +125,21 @@ describe('ReactMUIDatatableProvider', () => { /** * Used directly "setState" because we need to check only triggering `onStateChanged` */ - RenderedMockedComponent.props.toggleSearchBar(); - RenderedMockedComponent.props.handleSearchValue('Caz'); - RenderedMockedComponent.props.handleSort({ - columnName: 'firstName', - direction: 'DESC', - }); - RenderedMockedComponent.props.addFilter({ - columnName: 'firstName', - value: 'Caz', + act(() => { + RenderedMockedComponent.props.toggleSearchBar(); + RenderedMockedComponent.props.handleSearchValue('Caz'); + RenderedMockedComponent.props.handleSort({ + columnName: 'firstName', + direction: 'DESC', + }); + RenderedMockedComponent.props.addFilter({ + columnName: 'firstName', + value: 'Caz', + }); + RenderedMockedComponent.props.changePage(1); + RenderedMockedComponent.props.changePerPage(15); + RenderedMockedComponent.props.toggleSelectRow(data[0]); }); - RenderedMockedComponent.props.changePage(1); - RenderedMockedComponent.props.changePerPage(15); - RenderedMockedComponent.props.toggleSelectRow(data[0]); expect(onStateChanged).toHaveBeenLastCalledWith({ name: 'selectedData',