Przemek Suchodolski
@przemuh / przemuh.pl
🇰🇷 korpo, 🇵🇱 software-house, 🇺🇸 startup
Musician amateur 🎸 🥁 🎹
"Gamer" / PS4 🎮 ⚽️
expect( )
sum(2, 2)
.toBe( )
4
matcher
current value
expected value
expect(2+2).toBe(4);
expect(someObject).toEqual({ x: 1, y: 2});
expect(someFunction).toHaveBeenCalled();
Ok but where are UT?
UT is missing
Code looks good but UT are missing
UT?
UT?!
UT?!!
UT?!!one
UT?!!one!!!!
🤔
UNIT TESTING is a level of software testing where individual units / components of a software are tested...
A unit is the smallest testable part of any software.
Test in isolation.
describe("My awesome object", function() {
it("has fetch method", function() {
expect(typeof myObj.fetch).toBe("function");
});
describe("fetch method", function() {
it("should call API endpoint", function() {
spyOn(api, "awesomeEndpoint");
myObj.fetch();
expect(api.awesomeEndpoint).toHaveBeenCalled();
});
});
});
management
Red -> Green -> Refactor
"TDD is too Time Consuming.
The Business Team Would Never Approve"
"You Can’t Write Tests Until You Know the Design, & You Can’t Know the Design Until You Implement the Code"
"You Have to Write All Tests Before You Start the Code"
⏱
💰
😵
const Counter = ({ increment, value }) => {
const [count, setCount] = useState(0);
return (
<div>
<Number value={ value } />
<Button onClick={ increment }>+</Button>
</div>
);
};
UNIT
INTEGRATION
🤔
describe('Google demo test for Mocha', function() {
describe('with Nightwatch', function() {
it('uses BDD to run the Google simple test', function(browser) {
browser
.url('http://google.com')
.expect.element('body').to.be.present.before(1000);
browser.setValue('input[type=text]', ['nightwatch', browser.Keys.ENTER])
.pause(1000)
.assert.containsText('#main', 'Night Watch');
});
});
});
⏱
💰
😵
😴
😲
source: https://testingjavascript.com/
import pageVisibility from "./pageVisibility";
import createPollingAgent from "utils/pollingAgent";
jest.mock("./pageVisibility");
describe("pollingAgent", () => {
it("does not dispatch an action when tab is not active", () => {
jest.useFakeTimers();
pageVisibility.isHidden.mockReturnValue(true);
jest.runOnlyPendingTimers();
// rest of the test ...
});
});
it('renders correctly', () => {
const tree = renderer
.create(<Link page="http://www.instagram.com">Instagram</Link>)
.toJSON();
expect(tree).toMatchSnapshot();
});
"Mocking is a code smell.
If you have to do a lot of mocking to create a proper unit test, maybe that code doesn’t need unit tests at all."
exports[`<SimpleTable> renders emptyState for empty data 1`] = `
<table
class="css-1mk1rlg"
>
<thead>
<tr>
<th
class="css-k9h76t css-1sz1qrv"
>
column
</th>
</tr>
</thead>
<tbody>
<tr>
<td
colspan="1"
>
<div>
This is custom component for empty state
</div>
</td>
</tr>
</tbody>
</table>
`;
Why not shallow rendering ?
"Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components."
"Mocking is a code smell.
If you have to do a lot of mocking to create a proper unit test, maybe that code doesn’t need unit tests at all."