Testing React

master
Tudor Stanciu 2020-04-12 02:46:44 +03:00
parent 82815b6d9a
commit 9416e917f8
10 changed files with 341 additions and 1 deletions

View File

@ -5,7 +5,17 @@
"start": "run-p start:dev start:api",
"start:dev": "webpack-dev-server --config webpack.config.dev.js --port 3000",
"prestart:api": "node tools/createMockDb.js",
"start:api": "node tools/apiServer.js"
"start:api": "node tools/apiServer.js",
"test": "jest --watch"
},
"jest": {
"setupFiles": [
"./tools/testSetup.js"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/fileMock.js",
"\\.(css|less)$": "<rootDir>/tools/styleMock.js"
}
},
"dependencies": {
"bootstrap": "4.3.1",

View File

@ -0,0 +1,22 @@
import React from "react";
import Header from "./Header";
import { mount, shallow } from "enzyme";
import { MemoryRouter } from "react-router-dom";
// Note how with shallow render you search for the React component tag
it("contains 3 NavLinks via shallow", () => {
const numLinks = shallow(<Header />).find("NavLink").length;
expect(numLinks).toEqual(3);
});
// Note how with mount you search for the final rendered HTML since it generates the final DOM.
// We also need to pull in React Router's memoryRouter for testing since the Header expects to have React Router's props passed in.
it("contains 3 anchors via mount", () => {
const numAnchors = mount(
<MemoryRouter>
<Header />
</MemoryRouter>
).find("a").length;
expect(numAnchors).toEqual(3);
});

View File

@ -0,0 +1,34 @@
import React from "react";
import CourseForm from "./CourseForm";
import { shallow } from "enzyme";
function renderCourseForm(args) {
const defaultProps = {
authors: [],
course: {},
saving: false,
errors: {},
onSave: () => {},
onChange: () => {}
};
const props = { ...defaultProps, ...args };
return shallow(<CourseForm {...props} />);
}
it("renders form and header", () => {
const wrapper = renderCourseForm();
// console.log(wrapper.debug());
expect(wrapper.find("form").length).toBe(1);
expect(wrapper.find("h2").text()).toEqual("Add Course");
});
it('labels save buttons as "Save" when not saving', () => {
const wrapper = renderCourseForm();
expect(wrapper.find("button").text()).toBe("Save");
});
it('labels save button as "Saving..." when saving', () => {
const wrapper = renderCourseForm({ saving: true });
expect(wrapper.find("button").text()).toBe("Saving...");
});

View File

@ -0,0 +1,35 @@
import React from "react";
import { cleanup, render } from "react-testing-library";
import CourseForm from "./CourseForm";
afterEach(cleanup);
function renderCourseForm(args) {
let defaultProps = {
authors: [],
course: {},
saving: false,
errors: {},
onSave: () => {},
onChange: () => {}
};
const props = { ...defaultProps, ...args };
return render(<CourseForm {...props} />);
}
it("should render Add Course header", () => {
const { getByText } = renderCourseForm();
getByText("Add Course");
});
it('should label save button as "Save" when not saving', () => {
const { getByText } = renderCourseForm();
getByText("Save");
});
it('should label save button as "Saving..." when saving', () => {
const { getByText, debug } = renderCourseForm({ saving: true });
// debug();
getByText("Saving...");
});

View File

@ -0,0 +1,32 @@
import React from "react";
import CourseForm from "./CourseForm";
import renderer from "react-test-renderer";
import { courses, authors } from "../../../tools/mockData";
it("sets submit button label 'Saving...' when saving is true", () => {
const tree = renderer.create(
<CourseForm
course={courses[0]}
authors={authors}
onSave={jest.fn()}
onChange={jest.fn()}
saving
/>
);
expect(tree).toMatchSnapshot();
});
it("sets submit button label 'Save' when saving is false", () => {
const tree = renderer.create(
<CourseForm
course={courses[0]}
authors={authors}
onSave={jest.fn()}
onChange={jest.fn()}
saving={false}
/>
);
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,197 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`sets submit button label 'Save' when saving is false 1`] = `
<form
onSubmit={[MockFunction]}
>
<h2>
Edit
Course
</h2>
<div
className="form-group"
>
<label
htmlFor="title"
>
Title
</label>
<div
className="field"
>
<input
className="form-control"
name="title"
onChange={[MockFunction]}
type="text"
value="Securing React Apps with Auth0"
/>
</div>
</div>
<div
className="form-group"
>
<label
htmlFor="authorId"
>
Author
</label>
<div
className="field"
>
<select
className="form-control"
name="authorId"
onChange={[MockFunction]}
value={1}
>
<option
value=""
>
Select Author
</option>
<option
value={1}
>
Cory House
</option>
<option
value={2}
>
Scott Allen
</option>
<option
value={3}
>
Dan Wahlin
</option>
</select>
</div>
</div>
<div
className="form-group"
>
<label
htmlFor="category"
>
Category
</label>
<div
className="field"
>
<input
className="form-control"
name="category"
onChange={[MockFunction]}
type="text"
value="JavaScript"
/>
</div>
</div>
<button
className="btn btn-primary"
disabled={false}
type="submit"
>
Save
</button>
</form>
`;
exports[`sets submit button label 'Saving...' when saving is true 1`] = `
<form
onSubmit={[MockFunction]}
>
<h2>
Edit
Course
</h2>
<div
className="form-group"
>
<label
htmlFor="title"
>
Title
</label>
<div
className="field"
>
<input
className="form-control"
name="title"
onChange={[MockFunction]}
type="text"
value="Securing React Apps with Auth0"
/>
</div>
</div>
<div
className="form-group"
>
<label
htmlFor="authorId"
>
Author
</label>
<div
className="field"
>
<select
className="form-control"
name="authorId"
onChange={[MockFunction]}
value={1}
>
<option
value=""
>
Select Author
</option>
<option
value={1}
>
Cory House
</option>
<option
value={2}
>
Scott Allen
</option>
<option
value={3}
>
Dan Wahlin
</option>
</select>
</div>
</div>
<div
className="form-group"
>
<label
htmlFor="category"
>
Category
</label>
<div
className="field"
>
<input
className="form-control"
name="category"
onChange={[MockFunction]}
type="text"
value="JavaScript"
/>
</div>
</div>
<button
className="btn btn-primary"
disabled={true}
type="submit"
>
Saving...
</button>
</form>
`;

3
src/index.test.js Normal file
View File

@ -0,0 +1,3 @@
it("should pass", () => {
expect(true).toEqual(true);
});

2
tools/fileMock.js Normal file
View File

@ -0,0 +1,2 @@
// Mocks file imports for Jest. As suggested by https://jestjs.io/docs/en/webpack
module.exports = "test-file-stub";

2
tools/styleMock.js Normal file
View File

@ -0,0 +1,2 @@
// Mocks CSS imports for Jest. As suggested by https://jestjs.io/docs/en/webpack
module.exports = {};

3
tools/testSetup.js Normal file
View File

@ -0,0 +1,3 @@
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });