الگوهای تست برای کامپوننت های ری اکت — راهنمای کاربردی

1import React from 'react';
2import WithName from './WithName';
3
4function HelloName({name}) {
5	return (
6		<div>
7			Hello {name}
8		</div>
9	);
10}
11
12export default WithName(HelloName);

1import React from 'react';
2
3export default function WithName(Component){
4	class AddName extends React.Component {
5		render(){
6			return <Component name='James' />
7		}
8	}
9 
10    return AddName
11}

1import React from 'react';
2import { render } from '@testing-library/react';
3import HelloName from './HelloName';
4
5test('Says Hello James', () => {
6	const { getByText } = render(<HelloName />);
7	const linkElement = getByText(/Hello James/i);
8	expect(linkElement).toBeInTheDocument();
9});

1import React from 'react';
2import WithName from './WithName';
3
4export function HelloName({name}) {
5	return (
6		<div>
7			Hello {name}
8		</div>
9	);
10}
11
12export default WithName(HelloName);

1import React from 'react';
2import { render } from '@testing-library/react';
3import {HelloName} from './HelloName';
4import HelloNameDecorated from './HelloName';
5
6test('Says Hello James', () => {
7	const { getByText } = render(<HelloNameDecorated />);
8	const element = getByText(/Hello James/i);
9	expect(element).toBeInTheDocument();
10});
11test('Says Hello Mike', () => {
12	const { getByText } = render(<HelloName name='Mike' />);
13	const element = getByText(/Hello Mike/i);
14	expect(element).toBeInTheDocument();
15});
16test('Says Hello Danstan', () => {
17	const { getByText } = render(<HelloName name='Danstan' />);
18	const element = getByText(/Hello Danstan/i);
19	expect(element).toBeInTheDocument();
20});
21test('Says Hello Mary', () => {
22	const { getByText } = render(<HelloName name='Mary' />);
23	const element = getByText(/Hello Mary/i);
24	expect(element).toBeInTheDocument();
25});

1import React, { useState } from 'react';
2
3export default function Form({ onSubmit }) {
4
5	const [name, setName] = useState('')
6
7	const handleSubmit = (e) => {
8		// Do something with value of name
9	}
10	return (
11		<form>
12			<input onChange={(e) => setName(e.target.value)} name='name' value={name} />
13			<button onClick={handleSubmit}>Submit</button>
14		</form>
15	)
16}

1import React, { useState } from 'react';
2
3export default function Form({ handleSubmit }) {
4
5	const [name, setName] = useState('')
6	return (
7		<form onSubmit={() => handleSubmit({ name })}>
8			<input onChange={(e) => setName(e.target.value)} name='name' value={name} />
9			<button type='submit'>Submit</button>
10		</form>
11	)
12}

1import React from 'react';
2import Form from './Form';
3
4import Enzyme from 'enzyme';
5import Adapter from 'enzyme-adapter-react-16';
6
7Enzyme.configure({ adapter: new Adapter() });
8
9describe('Test Form Submit', () => {
10	it('Test form Submit', () => {
11		const mockCallBack = jest.fn();
12
13		const form = Enzyme.shallow((<Form handleSubmit={mockCallBack}/>));
14		form.find('input').simulate('change', {target: {value: 'James'}});
15		form.simulate('submit');
16		expect(mockCallBack.mock.calls.length).toEqual(1);
17		expect(mockCallBack.mock.calls).toEqual([[{name: 'James'}]]);
18	});
19});

1import React from 'react';
2
3export default function Profile() {
4
5		const userId = localStorage.getItem('user_id');
6
7		const user = { name: 'James Allen' } // From some API
8
9		return (
10				<div>
11
12					{!userId && <div>Please Login First</div>}
13					{
14						userId &&
15						<div>
16							<h1>Profile</h1>
17
18							<p>Name: {user.name}</p>
19
20							{user.id === userId && <button>Edit</button>}
21
22							{user.id !== userId && <button>Follow</button>}
23
24						</div>
25					}
26
27				</div>
28		)
29}

1import React from 'react';
2
3export const ProfileDataContext = React.createContext({});
4
5export const ProfileDataProvider = ProfileDataContext.Provider
6
7export const ProfileDataDecorator = (ChildComponent) => {
8	return function (){
9		const data = {user: {name: 'Mike Allen', id: 2}, userId: 2} // user Received from some API, while user_id from localStorage
10		return (
11			<ProfileDataContext.Provider value={data}>
12				<ChildComponent/>
13			</ProfileDataContext.Provider>
14		);
15	}
16}

1import React, {useContext} from 'react';
2import {ProfileDataContext, ProfileDataDecorator} from './ProfileDataProvider'
3
4export function Profile(props) {
5
6	const {user, userId} = useContext(ProfileDataContext)
7
8	return (
9		<div>
10
11		{!userId && <div>Please Login First</div>}
12		{
13		   userId &&
14		   <div>
15			<h1>Profile</h1>
16
17			<p>Name: {user.name}</p>
18
19			{user.id === userId && <button>Edit</button>}
20
21			{user.id !== userId && <button>Follow</button>}
22
23		   </div>
24	       }
25
26	</div>
27     )
28}
29
30export default ProfileDataDecorator(Profile)

1import React from 'react';
2import {Profile} from './Profile';
3import { render, screen } from '@testing-library/react';
4import { ProfileDataProvider } from './ProfileDataProvider';
5
6
7describe('Profile Component', () => {
8	test('Should show login only', () => {
9		const withNoUser = {}
10		const { getByText } = render(<ProfileDataProvider value={withNoUser}><Profile/></ProfileDataProvider>);
11		const loginElement = getByText(/Please login first/i);
12		expect(loginElement).toBeInTheDocument();
13	});
14
15	test('Should show Edit, no Follow', () => {
16		const withUserSignedIn = {user: {name: 'Danstan Onyango', id: 2}, userId: 2}
17		const { getByText } = render(<ProfileDataProvider value={withUserSignedIn}><Profile/></ProfileDataProvider>);
18		const nameElement = getByText(/Name: Danstan Onyango/i);
19		const EditElement = getByText(/Edit/i);
20		expect(nameElement).toBeInTheDocument();
21		expect(EditElement).toBeInTheDocument();
22		expect(screen.queryByText(/Follow/i)).toBeNull()
23	});
24	test('Should show Follow, no Edit', () => {
25		const withUserDifferentUserSignedIn = {user: {name: 'Danstan Onyango', id: 2}, userId: 3}
26		const { getByText } = render(<ProfileDataProvider value={withUserDifferentUserSignedIn}><Profile/></ProfileDataProvider>);
27		const nameElement = getByText(/Name: Danstan Onyango/i);
28		const FollowElement = getByText(/Follow/i);
29		expect(nameElement).toBeInTheDocument();
30		expect(FollowElement).toBeInTheDocument();
31		expect(screen.queryByText(/Edit/i)).toBeNull()
32	});
33});