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 can't use it to test React Native components because Jest has the only good, up to date React Native mock.
- There might be some other Jest features that RITEway lacks.
- I know this is minor, but you also have to do more setup compared to Jest, which just works™ for React Native and React apps created with CRA.
- RITEway forces you to split your components' tests in an effective way. This means only testing display components and their respective split off pure logic with unit tests, while covering the rest of your code using E2E tests.
- You can't mock.
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-jestor
yarn add --dev riteway-jestThen import it in your src/setupTests.js for React with CRA.
import 'riteway-jest/assert';For React Native you need to add a key in your package.json to the jest key.
"jest": {
"preset": "react-native",
"setupFilesAfterEnv": ["riteway-jest/assert"]
}If you have a jest.config.js.
module.exports = {
setupFilesAfterEnv: [
'riteway-jest/assert',
// ... other setup files ...
],
// ... other options ...
};If ESLint yells at you, add a global key to your .eslintrc.json.
{
"_comment": "<Your other settings here>",
"globals": {
"assert": true
},
"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,
});
});With async pure functions. (Note that describe cannot be async unlike RITEway)
const asyncSum = (a = 0, b = 0) => new Promise(r => setTimeout(r(a + b), 10));
describe('asyncSum()', () => {
const should = 'return the correct sum';
assert.skip({
given: 'undefined',
should: 'explicitly skip this test',
actual: asyncSum(undefined),
expected: null,
});
assert({
given: 'no arguments',
should: 'return 0',
actual: asyncSum(),
expected: 0,
});
assert({
given: 'zero',
should,
actual: asyncSum(2, 0),
expected: 2,
});
assert({
given: 'negative numbers',
should,
actual: asyncSum(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 and only 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',
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent