react-test-renderer#act TypeScript Examples
The following examples show how to use
react-test-renderer#act.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: App.test.tsx From anthem with Apache License 2.0 | 6 votes |
|
describe.skip("SettingsPage", () => {
test("SettingsPage component renders without crashing", () => {
const client = createMockClient();
act(() => {
create(
<ReduxProvider store={store}>
<ApolloProvider client={client}>
<ApolloHooksProvider client={client}>
<Router>
<SettingsPage {...mockI18NProps} />
</Router>
</ApolloHooksProvider>
</ApolloProvider>
</ReduxProvider>,
);
});
});
});
Example #2
| Source File: BigDecimalInput.test.tsx From jmix-frontend with Apache License 2.0 | 6 votes |
|
describe('BigDecimalInput', () => {
const ref = React.createRef<typeof InputNumber>();
let bigDecimalInputTestRenderer: ReactTestRenderer;
it('Renders correctly with required props', () => {
act(() => {
bigDecimalInputTestRenderer = create(<BigDecimalInput ref={ref} />);
});
})
it('Passes refs to the container component', () => {
const input = bigDecimalInputTestRenderer.root.findByType(InputNumber).instance;
expect(input).toEqual(ref.current);
});
it('Unmounts', () => {
act(() => bigDecimalInputTestRenderer.unmount());
})
})
Example #3
| Source File: CharInput.test.tsx From jmix-frontend with Apache License 2.0 | 6 votes |
|
describe('CharInput', () => {
const ref = React.createRef<Input>();
let charInputTestRenderer: ReactTestRenderer;
it('Renders correctly with required props', () => {
act(() => {
charInputTestRenderer = create(<CharInput ref={ref} />);
});
})
it('Passes refs to the container component', () => {
const input = charInputTestRenderer.root.findByType(Input).instance;
expect(input).toEqual(ref.current);
});
it('Unmounts', () => {
act(() => charInputTestRenderer.unmount());
})
})
Example #4
| Source File: DoubleInput.test.tsx From jmix-frontend with Apache License 2.0 | 6 votes |
|
describe('DoubleInput', () => {
const ref = React.createRef<typeof InputNumber>();
let inputWithMaskTestRenderer: ReactTestRenderer;
it('Renders correctly with required props', () => {
act(() => {
inputWithMaskTestRenderer = create(<DoubleInput ref={ref} />);
});
})
it('Passes refs to the container component', () => {
const input = inputWithMaskTestRenderer.root.findByType(InputNumber).instance;
expect(input).toEqual(ref.current);
});
it('Unmounts', () => {
act(() => inputWithMaskTestRenderer.unmount());
})
})
Example #5
| Source File: InputWithMask.test.tsx From jmix-frontend with Apache License 2.0 | 6 votes |
|
describe('InputWithMask', () => {
const ref = React.createRef<Input>();
let inputWithMaskTestRenderer: ReactTestRenderer;
it('Renders correctly with required props', () => {
act(() => {
inputWithMaskTestRenderer = create(<InputWithMask ref={ref} mask={"+4\\\\9 99 999 99"} />);
});
})
it('Passes refs to the container component', () => {
const input = inputWithMaskTestRenderer.root.findByType(Input).instance;
expect(input).toEqual(ref.current);
});
it('Unmounts', () => {
act(() => inputWithMaskTestRenderer.unmount());
})
})
Example #6
| Source File: IntegerInput.test.tsx From jmix-frontend with Apache License 2.0 | 6 votes |
|
describe('IntegerInput', () => {
const ref = React.createRef<typeof InputNumber>();
let integerInputTestRenderer: ReactTestRenderer;
it('Renders correctly with required props', () => {
act(() => {
integerInputTestRenderer = create(<IntegerInput ref={ref} />);
});
})
it('Passes refs to the container component', () => {
const input = integerInputTestRenderer.root.findByType(InputNumber).instance;
expect(input).toEqual(ref.current);
});
it('Unmounts', () => {
act(() => integerInputTestRenderer.unmount());
})
})
Example #7
| Source File: LongInput.test.tsx From jmix-frontend with Apache License 2.0 | 6 votes |
|
describe('LongInput', () => {
const ref = React.createRef<typeof InputNumber>();
let longInputTestRenderer: ReactTestRenderer;
it('Renders correctly with required props', () => {
act(() => {
longInputTestRenderer = create(<LongInput ref={ref} />);
});
})
it('Passes refs to the container component', () => {
const input = longInputTestRenderer.root.findByType(InputNumber).instance;
expect(input).toEqual(ref.current);
});
it('Unmounts', () => {
act(() => longInputTestRenderer.unmount());
})
})
Example #8
| Source File: UuidInput.test.tsx From jmix-frontend with Apache License 2.0 | 6 votes |
|
describe('LongInput', () => {
const ref = React.createRef<Input>();
let uuidInputTestRenderer: ReactTestRenderer;
it('Renders correctly with required props', () => {
act(() => {
uuidInputTestRenderer = create(<UuidInput ref={ref} />);
});
})
it('Passes refs to the container component', () => {
const input = uuidInputTestRenderer.root.findByType(Input).instance;
expect(input).toEqual(ref.current);
});
it('Unmounts', () => {
act(() => uuidInputTestRenderer.unmount());
})
})
Example #9
| Source File: useAuth.test.tsx From react-starter-boilerplate with MIT License | 6 votes |
|
describe('useAuth', () => {
test('adds token to session storage', async () => {
mockServer();
const { result } = renderHook(() => useAuth(), {
wrapper: ({ children }) => (
<AppProviders>
<>{children}</>,
</AppProviders>
),
});
await act(() => result.current?.login({ password: 'foo', username: 'bar' }));
expect(global.sessionStorage.getItem('accessToken')).toBe('MTQ0NjJkZmQ5OTM2NDE1ZTZjNGZmZjI3');
});
});
Example #10
| Source File: VerticalMenu.test.tsx From jmix-frontend with Apache License 2.0 | 5 votes |
|
describe('VerticalMenu', () => {
const verticalMenuJsx: JSX.Element = (
<IntlProvider locale="en">
<VerticalMenu>
<MenuItem
caption={"item title"}
>
<span> first item title</span>
<span> first item content</span>
</MenuItem>
<MenuItem
screenId={"secondScreen"}
caption={"item title"}
>
<span> Second item title</span>
<span> Second item content</span>
</MenuItem>
<SubMenuItem
caption={"test"}
>
<MenuItem
screenId={"thirdScreen"}
caption={"item title"}
>
<span> Third item title</span>
<span> Third item content</span>
</MenuItem>
<MenuItem
screenId={"fourthScreen"}
caption={"item title"}
>
<span> Fourth item title</span>
<span> Fourth item content</span>
</MenuItem>
</SubMenuItem>
</VerticalMenu>
</IntlProvider>
)
let verticalMenuTestRenderer: ReactTestRenderer;
describe('VerticalMenu renders without crashing', () => {
it('VerticalMenu render and mount', () => {
act(() => {
verticalMenuTestRenderer = create(verticalMenuJsx)
})
})
it('VerticalMenu unmount', () => {
act(() => {
verticalMenuTestRenderer.unmount();
})
})
})
})
Example #11
| Source File: setup.tsx From fe-foundation with Apache License 2.0 | 5 votes |
|
export function renderWrapperHook<T extends IHookLikeFunc>(
fn: T,
wrapper: React.ComponentType,
...initialProps: FunctionParams<T>
): IRenderHookResult<T> {
let value: ReturnType<T> | null = null;
let error: Error | null = null;
const resolvers: Array<() => void> = [];
const callback = (v: ReturnType<T>): void => {
value = v;
resolvers.splice(0, resolvers.length).forEach(resolve => resolve());
};
const errorCallback = (e: Error): void => {
error = e;
resolvers.splice(0, resolvers.length).forEach(resolve => resolve());
};
const hookProps = {current: initialProps};
const wrapped = (innerElement: React.ReactElement): React.ReactElement => {
return React.createElement(wrapper, null, innerElement);
};
let testRenderer: any = {};
act(() => {
testRenderer = create(wrapped(
<WrapperComponent
hook={fn}
params={hookProps.current}
callback={callback}
errorCallback={errorCallback}
/>
));
});
const {unmount, update} = testRenderer;
return {
getResult() {
if (error) {
throw error;
}
return value as ReturnType<T>;
},
waitForNextUpdate: () => new Promise(resolve => {
resolvers.push(resolve);
}),
rerender: (newProps = hookProps.current) => {
hookProps.current = newProps;
act(() => {
update(wrapped(
<WrapperComponent
hook={fn}
params={hookProps.current}
callback={callback}
errorCallback={errorCallback}
/>
));
});
},
execute: fn => {
act(() => {
fn();
});
},
unmount: () => {
act(() => {
unmount();
});
}
};
}
Example #12
| Source File: PasswordField.spec.tsx From react-bare-forms with MIT License | 4 votes |
|
describe("#PasswordField()", () => {
it("should render an input field with the bootstrap styled tags", () => {
let state = {
password: "joe",
};
let component = create(
<MockComponent state={state}>
<PasswordField name="password" value={state.password} />
</MockComponent>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it("should render a single input tag with no bootstrap styles", () => {
let state = {
password: "",
};
let component = create(
<MockComponent state={state}>
<PasswordField name="password" value={state.password} />
</MockComponent>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it("it should pass in props", () => {
let state = {
password: "joebloggs"
};
let testFormRederer: any = create(
<MockComponent state={state}>
<PasswordField name="password" value={state.password} />
</MockComponent>
);
const testFormInstance = testFormRederer.root;
expect(testFormInstance.props.state.password).toEqual(state.password);
});
it("it should display validation errors", () => {
let state = {
password: "a",
};
let component = create(
<MockComponent state={state}>
<PasswordField
name="password"
value={state.password}
validators={[isFieldEmpty(5)]}
/>
</MockComponent>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it("it should pass validation props", () => {
let state = {
password: "a",
};
let testFormRederer: any = create(
<div>
<MockComponent state={state}>
<PasswordField
name="password"
value={state.password}
validators={[isFieldEmpty(5)]}
/>
</MockComponent>
</div>
);
const testFormInstance = testFormRederer.root;
expect(testFormInstance)
});
it("should confirm passwords are equal", () => {
let state = {
password: "wizard",
confirmPassword: "wizard",
};
let component = create(
<MockComponent state={state}>
<PasswordField name="password" value={state.password} />
<PasswordField
name="confirmPassword"
value={state.confirmPassword}
validators={[areFieldsEqual("password")]} />
</MockComponent>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it("should how message that passwords are not equal", () => {
let state = {
password: "wizard",
confirmPassword: "w",
};
let root = create(
<MockComponent state={state}>
<PasswordField
name="password"
value={state.password}
/>
<PasswordField
name="confirmPassword"
value={state.confirmPassword}
validators={[areFieldsEqual("password")]} />
</MockComponent>
);
let tree = root.toJSON();
expect(tree).toMatchSnapshot();
act(() => {
state.confirmPassword = "wi";
root.update(
<MockComponent state={state}>
<PasswordField
name="password"
value={state.password}
/>
<PasswordField
name="confirmPassword"
value={state.confirmPassword}
validators={[areFieldsEqual("password")]} />
</MockComponent>
)
});
tree = root.toJSON();
expect(tree).toMatchSnapshot();
});
xit("should maintain a disabled submit button with both password fields not matching", () => {
let state = {
password: "",
confirmPassword: "",
};
let root = create(
<MockComponent state={state}>
<PasswordField
name="password"
value={state.password}
/>
<PasswordField
name="confirmPassword"
value={state.confirmPassword}
validators={[areFieldsEqual("password")]} />
<SubmitButton>Submit MockComponent</SubmitButton>
</MockComponent>
);
let tree: any = root.toJSON();
expect(tree).toMatchSnapshot();
expect(tree.children[2].props.disabled).toEqual(false);
act(() => {
state.password = "";
state.confirmPassword = "";
root.update(
<MockComponent state={state}>
<PasswordField
name="password"
value={state.password}
/>
<PasswordField
name="confirmPassword"
value={state.confirmPassword}
validators={[areFieldsEqual("password")]} />
<SubmitButton>Submit MockComponent</SubmitButton>
</MockComponent>
)
});
expect(tree.children[2].props.disabled).toEqual(true);
});
});
