It's My first Nextjs project with SSR.
When Integrating Enzyme For Reactjs UI Testing. it could not run due to "React' refers to a UMD global, but the current file is a module. Consider adding an import instead."
but it's works when i am using normal Reactjs Component(Functional or Class). Anyone Please give suggestions.
SandBox Link - https://codesandbox.io/s/currying-moon-gdk09
Full code From GitHub - https://github.com/Rizz13/nextJs-with-Enzyme
to run testing Use "npm test"
pages/Index.tsx
import Head from 'next/head'
import Link from 'next/link'
import { GetStaticProps } from 'next'
export default function Home({
allPostsData
}: {
allPostsData: {
title: string
id: string
}[]
}) {
return (
<>
<Head>
<title>Sample Page</title>
</Head>
<section className="icon-stars">
<p>[Your Self Introduction]</p>
<p>
(This is a sample website - you’ll be building a site like...)
</p>
</section>
<section>
<h2>Blog</h2>
<ul>
{allPostsData.map(({ id, title }) => (
<li key={id}>
<Link href="#">
<a>{title}</a>
</Link>
<br />
</li>
))}
</ul>
</section>
</>
)
}
export const getStaticProps: GetStaticProps = async () => {
const allPostsData = [{id: 0, title:"Sample1"}, {id: 1, title:"Sample2"}]
return {
props: {
allPostsData
}
}
}
_tests_/Index.tsx
import * as React from 'react'
import { expect as expect1 } from 'chai';
import IndexPage from '../pages/index'
import {/*mount,*/ shallow} from 'enzyme'
const setUp1 = (data) => {
return shallow(<IndexPage {...data} />);
}
let wrapper;
describe('props Check', () => {
beforeEach(() => {
wrapper = setUp1({});
});
it('should render an `.icon-stars`', () => {
expect1(wrapper.find('.icon-stars')).to.have.length(1);
});
});
When I using the Above Code Testing could not run due to below Error.
tests/Index.tsx
import * as React from 'react'
import { expect as expect1 } from 'chai';
import IndexPage from '../pages/index'
import {/*mount,*/ shallow} from 'enzyme'
const setUp1 = (data) => {
return shallow(<IndexPage {...data} />);
}
let wrapper;
describe('props Check', () => {
beforeEach(() => {
wrapper = setUp1(allPostsData={[]});
});
it('should render an `.icon-stars`', () => {
expect1(wrapper.find('.icon-stars')).to.have.length(1);
});
});
You have to pass props inside the testing component & use
import * as React from 'react'
In pages/Index.tsx for rendering react components
Related
i can't get the test id within my jest test. I am new to react testing. I want to test this component and get back for example the h3 text what was given before.
Tells me:
"TestingLibraryElementError: Unable to find an element by: [data-testid="testH3"]"
Can you help me?
// Component
import React from 'react';
import './Card.scss';
import Card from '#material-ui/core/Card';
import { Link } from "react-router-dom";
function MovieCard({title, image}) {
return (
<div className="card__container">
<Link to={"/details/" + title}>
<Card className="card">
<img src={image} alt=""/>
<div className="card__info">
<h3
data-testid="testH3"
className="card__title">{ title }
</h3>
</div>
</Card>
</Link>
</div>
)
}
export default MovieCard
// test
import React from 'react';
import { render, screen, cleanup } from '#testing-library/react';
import MovieCard from '../MovieCard';
import { BrowserRouter as Router } from "react-router-dom";
afterEach(cleanup);
describe('Test MovieCard', () => {
const tree = render(
<Router>
<MovieCard title="Batman" image="imagesrc"/>
</Router>
)
it('should match with snapshot', () => {
screen.debug();
expect(tree).toMatchSnapshot();
});
it('test h3', () => {
const {getByTestId} = tree;
const element = screen.getByTestId('testH3')
});
});
UPDATE:
Final code works now pretty well. Thank you guys
import React from 'react';
import { render, screen, cleanup } from '#testing-library/react';
import MovieCard from '../MovieCard';
import { BrowserRouter as Router } from "react-router-dom";
afterEach(cleanup);
describe('Test MovieCard', () => {
function tree() {
return render(
<Router>
<MovieCard title="Batman" image="imagesrc"/>
</Router>
)
}
it('should match with snapshot', () => {
expect(tree()).toMatchSnapshot();
});
it('test h3 text is Batman', () => {
const {getByTestId} = tree();
const element = screen.getByTestId('testH3')
expect(element.textContent).toEqual("Batman")
screen.debug();
});
});
use function instead of const
describe('Test MovieCard', () => {
function tree() {
return render(
<Router>
<MovieCard title="Batman" image="imagesrc"/>
</Router>
)
}
it('should match with snapshot', () => {
screen.debug();
expect(tree()).toMatchSnapshot();
});
it('test h3', () => {
const {getByTestId} = tree();
const element = screen.getByTestId('testH3')
});
});
I have a simple app where I use an axios to get UserList from the API.
Here is my App component:
import React,{useState,useEffect} from 'react';
import axios from 'axios';
import UserList from './components/Users/UserList';
function App() {
const [users,setUsers] = useState([]);
useEffect(()=>{
axios.get('https://reqres.in/api/users?page=2')
.then(response =>{
setUsers(response.data.data);
console.log(response.data);
})
.catch(error =>{
console.log(error)
})
}, [])
return (
<div>
<UserList users={users} />
</div>
);
}
export default App;
And I have the UserList component:
import React from 'react';
import classes from './UserList.module.css';
import Card from '../UI/Card';
const UserList = (props) => {
return (
<Card className={classes.users}>
<ul data-testid="ultest">
{props.users.map(user => <li key={user.id}>
<img src={user.avatar} alt={user.id}></img>
<div>{user.first_name} {user.last_name}
<p><a href={`mailto:${user.email}`}>{user.email}</a></p>
</div>
</li>)}
</ul>
</Card>
)
}
export default UserList;
I don't understand how to test UserList component. I want to test if it renders correctly but I always get:
TypeError: Cannot read property 'map' of undefined
When I use render.
What is the best way to test this component? Jest or testing library.
Any advice would be appreciated.
import React from 'react';
import { render} from '#testing-library/react';
import UserList from '../components/Users/UserList';
import '#testing-library/jest-dom/extend-expect';
test('to check if it renders', () => {
render (<UserList />)
});
Hey – You need to do it like so:
test('to check if it renders', () => {
render(<UserList users={someUsersDataHere}/>)
});
So your component can have users to map over. You will need to manually define some array of users or import the data from elsewhere if you have it already by any chance
const someUsersDataHere = [
{name: 'SomeName'},
....and so on
]
Im a bit new to the react ecosytem. Im having a weird behaviour with passing tests.
Im using CRA, prop-types and react-test-library.
Here is my component:
import React from 'react';
import PropTypes from 'prop-types';
export default function Navbar({
Logo, MenuItems, className,
}) {
return (
<nav aria-label="navigation bar" className={className}>
{Logo}
<div>
{ MenuItems.map((MenuItem) => MenuItem) }
</div>
</nav>
);
}
Navbar.defaultProps = {
className: '',
};
Navbar.propTypes = {
className: PropTypes.string,
Logo: PropTypes.node.isRequired,
MenuItems: PropTypes.arrayOf(PropTypes.node).isRequired,
};
I want to test that prop-types complains when params are not receiving the right type.
import React from 'react';
import { render } from '#testing-library/react';
import Navbar from './Navbar';
describe('<Navbar />', () => {
beforeAll(() => {
jest.spyOn(console, 'error').mockImplementation(() => {});
});
beforeEach(() => {
console.error.mockClear();
});
afterAll(() => {
console.error.mockRestore();
});
it('renders', () => {
render(<Navbar
Logo={<p data-test="logo">My logo</p>}
MenuItems={[
<p key="spanish">Spanish</p>,
<p key="english">english</p>,
]}
/>);
expect(console.error).not.toHaveBeenCalled();
});
it('errors to console when Logo is missing', () => {
render(<Navbar MenuItems={[
<p key="spanish">Spanish</p>,
<p key="english">English</p>,
]}
/>);
expect(console.error).toHaveBeenCalled();
});
it('does not error to console when Logo is missing', () => {
render(<Navbar MenuItems={[
<p key="spanish">Spanish</p>,
<p key="english">English</p>,
]}
/>);
expect(console.error).toHaveBeenCalled();
});
});
My thinking is that Im not resetting properly the mocks, they have some state that it is not clear or something similar.
What am i missing?
PropTypes.checkPropTypes(...) only console.errors a given message once. To reset the error warning cache in tests, call PropTypes.resetWarningCache()
Source
Try invoke resetWarningCache in your beforeEach hooks
import PropTypes from 'prop-types';
beforeEach(() => {
PropTypes.resetWarningCache()
});
I'm trying to test a component it has two props title, and url.
I'm unsure how to pass mock data, i made an attempt but it passes but im pretty sure its not reading whats in the data object
Both tests are passing.
Card.js
import React, {Component} from 'react';
const Styles = {
width: '300px',
height: '300px'
}
class Card extends React.Component {
render() {
return (
<div>
{/* Renders title of the GIY */}
<h1>{this.props.title}</h1>
<div >
<img alt="" src={this.props.url}/>
</div>
</div>
);
}
}
export default Card;
Card.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import {shallow} from 'enzyme';
import Card from './Card';
describe('Should render Card Component', ()=> {
it('should render card component', ()=> {
const component = shallow(<Card />);
})
});
describe('Should render title/ url prop', ()=>{
it('should render title /url prop', ()=>{
// trying to mock data for the Card component
const data = {
title: "owl",
url:"https://giphy.com/gifs/bird-owl-qISaMW1xwmvNS"
}
const component = shallow(<Card title={data.title} url={data.url}/>)
})
})
You're not making any assertions. You need to expect some result to happen.
Card.js (this can be a pure function if it doesn't require state)
import React from "react";
import PropTypes from "prop-types";
const styles = {
width: "300px",
height: "300px"
};
const Card = ({ title, url }) =>
title && url ? ( // if a title and url are passed in, return <div>...</div>, else return "null"
<div className="card">
<h1>{title}</h1>
<div>
<img alt="" src={url} styles={styles} />
</div>
</div>
) : null;
// PropTypes will throw a warning if either of them is missing
PropTypes.propTypes = {
title: PropTypes.string.isRequired,
url: PropTypes.string.isRequired
};
export default Card;
Card.test.js
import React from "react";
import { shallow } from "enzyme";
import Card from "../index";
// we define initial props (empty strings)
const initialProps = {
title: "",
url: ""
};
// we shallow wrap the Card while passing in the "initialProps"
const wrapper = shallow(<Card {...initialProps} />);
// we define some props that will be passed in during our second test
const nextProps = {
title: "owl",
url: "https://media.giphy.com/media/qISaMW1xwmvNS/giphy.gif"
};
describe("Card Component", () => {
afterAll(() => wrapper.unmount());
it("shouldn't render a card without the required props", () => {
expect(wrapper.type()).toBeNull();
});
it("should render a card if the required props are present", () => {
wrapper.setProps({ ...nextProps }); // we update the component with "nextProps"
expect(wrapper.find("div.card")).toHaveLength(1); // expect "div.card" to be present
expect(wrapper.find("h1").text()).toContain(nextProps.title); // expect the "h1" element to contain "owl"
expect(wrapper.find("img").prop("src")).toBe(nextProps.url); // expect the "img"'s src to be "https://media.giphy.com/media/qISaMW1xwmvNS/giphy.gif"
});
});
Working example: https://codesandbox.io/s/k35zpqwk97
I have a component like this:
component.js
import React from "react";
import PropTypes from "prop-types";
const Test = ({ text }) => (
<div>
{text.split("\n").map((item, key) => {
return (
<span key={key}>
{item}
<br />
</span>
);
})}
</div>
);
Test.propTypes = {
text: PropTypes.string.isRequired
};
export default Test;
How do i write component test for this react component using enzyme? I am new to react and enzyme. Any help will really appreciable.
This could be a test using mocha:
import {shallow} from 'enzyme'
import assert from 'assert'
import Test from './Test'
describe('component Test', () => {
it('should show a span for each line of "text" prop', () => {
const text = `foo
bar
`
const wrapper = shallow(<Test text={text} />)
const spans = wrapper.find('span')
assert.equal(spans.length, 2)
assert.equal(spans.at(0).text(), 'foo')
assert.equal(spans.at(1).text(). 'bar')
})
it('should throw if "text" prop is not provided', () => {
assert.throws(() => {
shallow(<Text />)
})
})
})
Here is shamelessly taken example of testing dom using enzyme + jest (from jest web site):
// __tests__/CheckboxWithLabel-test.js
import React from 'react';
import {shallow} from 'enzyme';
import CheckboxWithLabel from '../CheckboxWithLabel';
test('CheckboxWithLabel changes the text after click', () => {
// Render a checkbox with label in the document
const checkbox = shallow(
<CheckboxWithLabel labelOn="On" labelOff="Off" />
);
expect(checkbox.text()).toEqual('Off');
checkbox.find('input').simulate('change');
expect(checkbox.text()).toEqual('On');
});
I recommend you to go though the link I gave - it contains nice examples of testing react components using Jest + Enzyme.