overmind-react/es/index.test.js

Functional actions

import { Overmind, createOvermindMock } from 'overmind';
import * as React from 'react';
import { render, act } from '@testing-library/react';
import '@testing-library/jest-dom';
import { Provider, createStateHook } from './';
describe('React', () => {
    test('should allow using hooks', () => {
        let renderCount = 0;
        const doThis = ({ state }) => {
            state.foo = 'bar2';
        };
        const state = {
            foo: 'bar',
        };
        const actions = {
            doThis,
        };
        const config = {
            state,
            actions,
        };
        const app = new Overmind(config);
        const useState = createStateHook();
        const FooComponent = () => {
            const state = useState();
            renderCount++;
            return React.createElement("h1", null, state.foo);
        };
        const { container } = render(React.createElement(Provider, { value: app },
            React.createElement(FooComponent, null)));
        expect(renderCount).toBe(1);
        act(() => {
            app.actions.doThis();
        });
        expect(renderCount).toBe(2);
        expect(container).toMatchSnapshot();
    });
    test('should allow using hooks with scoped tracking', () => {
        let renderCount = 0;
        const doThis = ({ state }) => {
            state.foo.push({ foo: 'bar2' });
        };
        const doThat = ({ state }) => {
            state.foo[0].foo = 'bar3';
        };
        const state = {
            foo: [{ foo: 'bar' }],
        };
        const actions = {
            doThis,
            doThat,
        };
        const config = {
            state,
            actions,
        };
        const app = new Overmind(config);
        const useState = createStateHook();
        const FooComponent = () => {
            const state = useState((state) => state.foo[0]);
            renderCount++;
            return React.createElement("h1", null, state.foo);
        };
        const { container } = render(React.createElement(Provider, { value: app },
            React.createElement(FooComponent, null)));
        expect(renderCount).toBe(1);
        act(() => {
            app.actions.doThis();
        });
        expect(renderCount).toBe(1);
        act(() => {
            app.actions.doThat();
        });
        expect(renderCount).toBe(2);
        // This is not showing the expected result, but logging the rendering does, so must be the
        // library messing it up
        expect(container).toMatchSnapshot();
    });
    test('should allow using mocked Overmind', () => {
        let renderCount = 0;
        const doThis = ({ state }) => {
            state.foo = 'bar2';
        };
        const state = {
            foo: 'bar',
        };
        const actions = {
            doThis,
        };
        const config = {
            state,
            actions,
        };
        const useState = createStateHook();
        const FooComponent = () => {
            const state = useState();
            renderCount++;
            return React.createElement("h1", null, state.foo);
        };
        const mock = createOvermindMock(config);
        const { container } = render(React.createElement(Provider, { value: mock },
            React.createElement(FooComponent, null)));
        expect(renderCount).toBe(1);
        expect(container).toMatchSnapshot();
    });
    test('should throw an error without provider', () => {
        expect.assertions(1);
        const useState = createStateHook();
        const FooComponent = () => {
            const state = useState();
            return React.createElement("h1", null, state.foo);
        };
        expect(() => {
            render(React.createElement(FooComponent, null));
        }).toThrow(Error);
    });
});
//# sourceMappingURL=index.test.js.map