0.1.7 • Published 2 years ago
@jest-decorated/react v0.1.7
Decorators for writing jest-based tests for react components
Extension of @jest-decorated package.
Utilities for testing react
components. Compatible with enzyme
, @testing-libray/react
and react-dom/test-utils
.
Make sure to register ReactTestRunner
on your parent test.
Jest test:
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import MyComponent from "../MyComponent";
describe("MyComponentTest", () => {
let container = null;
beforeEach(() => {
container = document.createElement("span");
document.body.appendChild(container);
});
afterEach(() => {
unmountComponentAtNode(container);
container.remove();
container = null;
});
const renderWithProps = (props = {}) => {
act(() => {
render(<MyComponent {...props} />, container);
});
};
it("turned on by default", () => {
renderWithProps();
const button = document.querySelector("[data-testid=toggle]");
expect(button.innerHTML).toBe("Turn on");
});
it("changes value when clicked, calls onChange", () => {
const passedProps = { onChange: jest.fn() };
renderWithProps(passedProps);
const button = document.querySelector("[data-testid=toggle]");
button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(passedProps.onChange).toHaveBeenCalledTimes(1);
expect(button.innerHTML).toBe("Turn off");
});
});
Same test with @jest-decorated
:
import { render } from "react-dom/test-utils";
@Describe()
@RunWith(ReactTestRunner)
class MyComponentTest {
@ComponentContainer()
container;
@Act()
@ComponentProvider("../MyComponent")
provider(MyComponent, passedProps) {
return render(<MyComponent {...passedProps} />, this.container);
}
@It("turned on by default")
isTurnOn(component, { props }) {
const button = document.querySelector("[data-testid=toggle]");
expect(button.innerHTML).toBe("Turn on");
}
@It("changes value when clicked, calls onChange")
@WithProps({ onChange: jest.fn() })
shouldToggle(component, { props }) {
const button = document.querySelector("[data-testid=toggle]");
button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(props.onChange).toHaveBeenCalledTimes(1);
expect(button.innerHTML).toBe("Turn off");
}
}
Install & Setup
Read here.
Decorators
@Act
@ActAsync
@ComponentContainer
@ComponentProvider
@DefaultContext
@DefaultProps
@WithContext
@WithProps
@WithState
Contributing
Contribution guidelines for this project
License
0.1.5-beta.2
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.3-beta1
2 years ago
0.1.3-beta2
2 years ago
0.1.2
3 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.1
3 years ago
0.1.0
3 years ago
0.1.0-beta.2
3 years ago
0.0.22
3 years ago
0.0.23
3 years ago
0.0.20
3 years ago
0.0.19
4 years ago
0.0.18
4 years ago
0.0.17
4 years ago
0.0.15
4 years ago
0.0.16
4 years ago
0.0.13
4 years ago
0.0.14
4 years ago
0.0.12
4 years ago
0.0.10
4 years ago
0.0.11
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago