Skip to content

Commit

Permalink
upgrade react + remove enyzme support
Browse files Browse the repository at this point in the history
  • Loading branch information
Raice Hannay committed Jan 24, 2024
1 parent 4ffb9ed commit 76b747c
Show file tree
Hide file tree
Showing 48 changed files with 2,751 additions and 3,709 deletions.
19 changes: 8 additions & 11 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
# Logs
#Logs
logs
*.log

#project
coverage
dist
lib
/enzyme/
/react-testing-library/
./cjs
./esm
*.js
*.d.ts
*.tgz
*.map

#node
node_modules
npm-debug.log
yarn.error.l
*.tgz
package-lock.json

#IDEs
.idea
Expand All @@ -29,9 +32,3 @@ yarn.error.l

#git hooks
pre-commit.sh

#.teamcity
.teamcity/target/
.teamcity/.classpath
.teamcity/.settings/
.teamcity/.project
41 changes: 4 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,42 +12,16 @@ project requires additional functionality as part of your component test setup.
The concept behind it is that you can create a single instance of the wrapper class at the top of
your test file and define the defaults to use there, then in each test scenario you can reference
the single instance and define the scenario-specific props/children etc. chaining the public methods,
then finally calling the `mount`, `shallow` or `render` method (only `render` is available in the
`react-testing-library` variants) to return the rendering result.
then finally calling the `render` method to return the rendering result.

The scenario-specific definitions are reset each time you call `mount`, `render` or `shallow`, which
The scenario-specific definitions are reset each time you call `render`, which
will ensure it reverts back to only the defaults set at the top and prevents scenario data from leaking
between tests.

## Example
### With `enzyme`
```typescript jsx
const component = new Wrapper(SomeComponent)
.withDefaultChildren(<div className="Child" />)
.withDefaultProps({
prop1: "Default value 1",
prop2: "Default value 2"
});

describe("when testing a scenario", () => {
const wrapper = component
.withProps({
prop1: "Scenario value 1"
})
.mount();
import { Wrapper } from "react-test-wrapper";

it("uses the scenario-specific value for prop1", () => {
expect(wrapper.find(".SomeComponent--prop1").text()).toBe("Scenario value 1");
});

it("uses the default value for prop2", () => {
expect(wrapper.find(".SomeComponent--prop2").text()).toBe("Default value 1");
});
});
```

### With `react-testing-library`
```typescript jsx
const component = new Wrapper(SomeComponent)
.withDefaultChildren(<div className="Child" />)
.withDefaultProps({
Expand All @@ -60,7 +34,7 @@ describe("when testing a scenario", () => {
.withProps({
prop1: "Scenario value 1"
})
.mount();
.render();

it("uses the scenario-specific value for prop1", () => {
expect(getByText("Scenario value 1")).toBeDefined();
Expand All @@ -74,13 +48,6 @@ describe("when testing a scenario", () => {

Package contents
----------------

## For `enzyme`
- [`Wrapper`](/docs/enzyme/Wrapper.md)
- [`WrapperWithIntl`](/docs/enzyme/WrapperWithIntl.md)
- [`WrapperWithRedux`](/docs/enzyme/WrapperWithRedux.md)

## For `react-testing-library`
- [`Wrapper`](/docs/react-testing-library/Wrapper.md)
- [`WrapperWithIntl`](/docs/react-testing-library/WrapperWithIntl.md)
- [`WrapperWithRedux`](/docs/react-testing-library/WrapperWithRedux.md)
Expand Down
3 changes: 3 additions & 0 deletions cjs/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"type": "commonjs"
}
81 changes: 0 additions & 81 deletions docs/enzyme/Wrapper.md

This file was deleted.

34 changes: 0 additions & 34 deletions docs/enzyme/WrapperWithIntl.md

This file was deleted.

104 changes: 0 additions & 104 deletions docs/enzyme/WrapperWithRedux.md

This file was deleted.

2 changes: 1 addition & 1 deletion docs/react-testing-library/Wrapper.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ exist in the React tree.

```typescript jsx
import * as React from "react";
import { Wrapper as BaseWrapper } from "react-test-wrapper/react-testing-library";
import { Wrapper as BaseWrapper } from "react-test-wrapper";

export class WrapperWithCustomStuff<
C extends React.ComponentType<any>,
Expand Down
2 changes: 1 addition & 1 deletion docs/react-testing-library/WrapperWithIntl.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ How to extend for use in your project
```typescript jsx
import * as React from "react";
import { IntlConfig } from "react-intl";
import { WrapperWithIntl as BaseWrapper } from "react-test-wrapper/react-testing-library";
import { WrapperWithIntl as BaseWrapper } from "react-test-wrapper";

import messages from "./locales/en-NZ";

Expand Down
13 changes: 3 additions & 10 deletions docs/react-testing-library/WrapperWithRedux.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,6 @@ define your own `createStore` method to return an instance of your Redux store,
`initialState` and `middlewares` that this class provides - it is important to ensure that your
store uses these, because if it disregards them, none of the methods this class provides will function.

Extensions to the returned `ReduxWrapper`
-----------------------------------------

The return type of the `mount` method extends Enzyme's `ReactWrapper` by adding a store property to
it, so you can access the store instance that the component was mounted with. This is useful for
some edge cases where you may want to test how your component reacts to actions being dispatched
outside of the component's scope.

For example:
```typescript jsx
Expand All @@ -28,7 +21,7 @@ describe("when testing a scenario", () => {
value: "Scenario value 1"
}
})
.mount();
.render();

it("renders the initial value", () => {
expect(wrapper.find(".SomeComponent--value").text()).toBe("Initial value");
Expand Down Expand Up @@ -69,7 +62,7 @@ Sets the scenario-specific Redux store state to be used - cleared after `render`
Toggles whether arrays get merged or not in Redux state.

### `render`
Mounts the component with the `react-testing-library` `render` function, using the currently-set data.
Mounts the component with the React Testing Library `render` function, using the currently-set data.
Returns a `RenderResult` instance, which also includes a `store` property.


Expand All @@ -78,7 +71,7 @@ How to extend for use in your project

```typescript jsx
import * as React from "react";
import { WrapperWithRedux as BaseWrapper } from "react-test-wrapper/react-testing-library";
import { WrapperWithRedux as BaseWrapper } from "react-test-wrapper";

import { createStore, TStoreState } from "../store";

Expand Down
Loading

0 comments on commit 76b747c

Please sign in to comment.