Skip to content

Commit

Permalink
Added example usage
Browse files Browse the repository at this point in the history
  • Loading branch information
viktor-podzigun committed Jun 1, 2023
1 parent 98f74dd commit 2161c8b
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 3 deletions.
41 changes: 38 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,44 @@ npm i --save-dev react-assert

### Usage

Imports:

```javascript
import React from "react";
import TestRenderer from "react-test-renderer";
import { assertComponent } from "react-assert";

// 1. import
import { assertComponents } from "react-assert";

function MyComponent(props) {
return (
<div>
<SubComponent />
<p className="my">{props.text}</p>
</div>
);
}
MyComponent.displayName = "MyComponent";

function SubComponent() {
return <p className="sub">Sub</p>;
}

describe("MyComponent", () => {
it("should render component", () => {
//given
const text = "Hello";

//when
const result = TestRenderer.create(<MyComponent text={text} />).root;

//then
// 2. call it with result.children and expected components tree
assertComponents(
result.children,
<div>
<p className="sub">Sub</p>
<p className="my">{text}</p>
</div>
);
});
});
```
44 changes: 44 additions & 0 deletions test/example.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { assertComponents } from "../index.mjs";

const { describe, it } = await (async () => {
// @ts-ignore
return process.isBun // @ts-ignore
? Promise.resolve({ describe: (_, fn) => fn(), it: test })
: import("node:test");
})();

// @ts-ignore
function MyComponent(props) {
return (
<div>
<SubComponent />
<p className="my">{props.text}</p>
</div>
);
}
MyComponent.displayName = "MyComponent";

function SubComponent() {
return <p className="sub">Sub</p>;
}

describe("MyComponent", () => {
it("should render component", () => {
//given
const text = "Hello";

//when
const result = TestRenderer.create(<MyComponent text={text} />).root;

//then
assertComponents(
result.children,
<div>
<p className="sub">Sub</p>
<p className="my">{text}</p>
</div>
);
});
});
1 change: 1 addition & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,5 +34,6 @@
"forceConsistentCasingInFileNames": true,
"noEmit": true,
// "emitDeclarationOnly": true,
"jsx": "react"
}
}

0 comments on commit 2161c8b

Please sign in to comment.