@jest-decorated/react

Decorators for writing jest-based tests for react components

Extension of @jest-decorated package.

Utilities for testing react components. Compatible with enzyme, testing-libray and react-dom/test-utils.

Example usage

Make sure to register ReactTestRunner on your parent test:

@Describe()
@RunWith(ReactTestRunner)
class MyComponentTest {
    
    @ComponentContainer()
    container;
    
    @ComponentProvider()
    provider(passedProps) {
        return render(<MyComponent {...passedProps} />, this.container);
    }
    
    @It("changes value when clicked, calls onChange")
    @WithProps({ onChange: jest.fn() })
    shouldToggle(returnValueOfComponentProvider, passedPops) {
        const button = document.querySelector("[data-testid=toggle]");
        expect(button.innerHTML).toBe("Turn on");
    
        button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
        expect(passedPops.onChange).toHaveBeenCalledTimes(1);
        expect(button.innerHTML).toBe("Turn off");
    }
}

Decorators

@Act

@ActAsync

@ComponentContainer

@ComponentProvider

@DefaultContext

@DefaultProps

@WithContext

@WithProps

@WithState

Contributing

Contribution guidelines for this project

License

MIT License