Jest is a JavaScript unit testing framework built by Facebook.
- myProgram.js
- __tests__
- myProgram-test.js
Each test file looks something like this:
const MathModule = require("../myMath"); // 1
describe("my math module", () => {
// 2
it("adds two numbers", () => {
// 3
// Your testing code goes here
});
});
describe
defines a set of tests.it
defines a single test.
You can run the test with jest
command.
$ jest
expect(value).toBe(something);
toBe
: compare 2 values using===
operator.
expect(2).toBe(2); // OK
toEqual
: recursively compares two values.
expect({}).toEqual({}); // OK
toContain
: makes sure the array has the given item.
expect([1, 2, 3]).toContain(1); // OK
toThrow
: checks if the given function throws an error.
expect(() => {
undefined();
}).toThrow(); // OK
not
: useful to inverse the expectation.
expect(2).not.toBe(4); // OK
You can see other matchers here.
JavaScript relies on callbacks in many cases and Jest supports testing asynchronous code.
describe('my async module', () => {
it('supports promises', () => {
return new Promise((resolve) => {
setTimeout(resolve, 1000);
})
});
it('supports async/await', async () => {
await saveUser({...});
});
});
If you need to add some setup/teardown logic, use beforeEach
/afterEach
and beforeAll
/afterAll
:
describe("my math module", () => {
beforeAll(() => {
console.log("This is executed before the test suite");
});
beforeEach(() => {
console.log("This is executed before each testcase");
});
it("adds two numbers", () => {
expect(() => {
undefined();
}).toThrow();
});
});
jest.fn
creates a mock function.
const add = jest.fn() //=> returns an empty function
const num = jest.fn(() => 3) //=> returns 3
$ ./node_modules/.bin/jest --watch
press p
and put the file.
src/components/__tests__/main/index.js
$ ./node_modules/.bin/jest
$ ./node_modules/.bin/jest --coverage
$ ./node_modules/.bin/jest --verbose
Enzyme
is a JavaScript Testing utility for React that makes it easier to test your React Components' output.
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
create src/setupTests.js
file.
If you don't create this file, you have to define the code below in each test file.
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });
You also have to create .babelrc
and paste the code below.
{
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs"
}
],
"@babel/preset-react"
]
}
if you want to test the <App />
component, you can extend our App.test.js
file by adding the following.
The shallow()
will test the provided component and ignores any child components that may be present in the component tree thereafter. if we had a <Header />
and <Footer />
component within <App />
for example, they would be ignored in this test.
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
describe('First React component test with Enzyme', () => {
it('renders without crashing', () => {
shallow(<App />);
});
});
You can find a class called headerComponet
from shallow copied Header
like the code below.
describe("Header Component", () => {
it("should render without errors", () => {
const component = shallow(<Header />);
const wrapper = component.find(".headerComponent");
expect(wrapper.length).toBe(1);
});
});
You can use debug()
like the code below.
configure({ adapter: new Adapter() });
describe("It should render without errors", () => {
it("should render without errors", () => {
const component = shallow(<Header />);
const wrapper = component.find(".headerComponent");
console.log(component.debug());
});
});
The output would be something like this.
<header className="headerComponent">
<h1>
Header!!
</h1>
</header>