Unit tests that always supply a good bug report when they fail for Jest.
MIT License
Inspired by Eric Elliott's RITEway.
TLDR: I wanted RITEway's assert
for Jest.
I love RITEway's API because it forces you to write good unit tests by it's given
-should
API and only exposing the equals
assertion.
Only problem is RITEway is build using tape. You can't use it with Jest, which in turn has some advantages and disadvantages.
You might want to check out RITEway because you can learn these advantages first hand. I prefer RITEway for React apps and use RITEway-Jest for React Native apps.
npm i --save-dev riteway-jest
or
yarn add --dev riteway-jest
Add an import in your src/setupTests.js
.
import 'riteway-jest/src/riteway-jest.js';
Add to your jest
key in package.json
.
"jest": {
"preset": "react-native",
"setupFilesAfterEnv": ["node_modules/riteway-jest/src/riteway-jest.js"]
}
Add to your jest
key in package.json
.
"jest": {
"preset": "jest-expo",
"setupFilesAfterEnv": ["node_modules/riteway-jest/src/riteway-jest.js"]
}
jest.config.js
instead of package.json
.module.exports = {
setupFilesAfterEnv: [
'node_modules/riteway-jest/src/riteway-jest.js',
// ... other setup files ...
],
// ... other options ...
};
Add a global
key to your .eslintrc.json
.
{
"_comment": "<Your other settings here>",
"globals": {
"assert": 'readonly'
},
"rules": {
"_comment": "<Your rules here>"
}
}
With pure functions.
const sum = (a = 0, b = 0) => a + b;
describe('sum()', () => {
const should = 'return the correct sum';
assert({
given: 'no arguments',
should: 'return 0',
actual: sum(),
expected: 0,
});
assert({
given: 'zero',
should,
actual: sum(2, 0),
expected: 2,
});
assert({
given: 'negative numbers',
should,
actual: sum(1, -4),
expected: -3,
});
});
Using React Native Testing Library.
import React from 'react';
import { Text } from 'react-native';
import { render } from 'react-native-testing-library';
function MyText({ title }) {
return <Text>{title}</Text>;
}
describe('Text component', () => {
const createText = (props = {}) => render(<MyText {...props} />);
{
const props = { title: 'Foo' };
const $ = createText(props).getByType;
assert({
given: 'a title',
should: 'display the title',
actual: $('Text').props.children,
expected: props.title,
});
}
});
Using React Testing Library.
import PropTypes from 'prop-types';
import React from 'react';
import { cleanup, render } from 'react-testing-library';
function Button({ disabled, onClick, text }) {
return (
<button data-testid="foo" disabled={disabled} onClick={onClick}>
{text}
</button>
);
}
Button.propTypes = {
disabled: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired,
text: PropTypes.string,
};
Button.defaultProps = {
disabled: false,
text: '',
};
describe('button component', () => {
const createButton = (props = {}) =>
render(<Button onClick={() => {}} {...props} />);
{
const props = { text: 'foo' };
const $ = createButton(props).getByTestId;
assert({
given: 'a text',
should: "render 'foo'",
actual: $('foo').textContent,
expected: props.text,
});
cleanup();
}
{
const props = { disabled: true, text: 'foo' };
const $ = createButton(props).getByText;
assert({
given: 'disabled',
should: 'be disabled',
actual: $('foo').hasAttribute('disabled'),
expected: props.disabled,
});
cleanup();
}
});
assert
supports Jest's skip
, only
and todo
functions.
// This test is explicitly skipped
assert.skip({
given: 'something',
should: 'be equal to something',
actual: 'nothing',
expected: 'something',
});
// This test gets executed
assert.only({
given: 'something',
should: 'be equal to something',
actual: 'nothing',
expected: 'something',
});
// This test is implicitly skipped because the .only() above
assert({
given: 'something',
should: 'be equal to something',
actual: 'nothing',
expected: 'something',
});
each
is currently not supported.