# Jest Tests, Now on CodePen

Canonical: https://brew.new/templates/codepen/jest-tests-now-on-codepen

Brand: codepen.io
Category: general

![Preview of Jest Tests, Now on CodePen](https://cdn.brew.new/email-preview-16d1e70e73722b00-tracking_r57x32m6ky0wxg82qk5y3ky6t98ehadm-1791926569728.png)

## Email content

Jest Tests, Now on CodePen

CodePen now supports Jest, the "delightful JavaScript testing framework".

Adding the Jest Block manually will scaffold a sample.test.js file for you, or adding any *.test.js file will automatically add the Block. Here's a basic unit test:

function add(a, b) {

return a + b;

}

describe('add', () => {

it('adds two numbers', () => {

expect(add(2, 2)).toBe(4);

});

});

Should the test fail, you'll get a warning diagnostic (but it won't otherwise fail to build your Pen).

You can also test UI by setting the enviornment to jsdom:

{

"testEnvironment": "jsdom"

}

This allows you to do things like mount components and test that they work how you think they will work, or even test your own CSS.

A visual representation of your passing/failing tests will automatically be created at /test-results.html which you can visit in the preview, or change where you'd like that file to be created:

{

"globals": {

"outputFilepath": "/index.html"

},

"testTimeout": 5000

}

Explore Jest Examples

— Team CodePen

CodePen, Inc. · 70 SW Century Dr #1019 Bend OR 97702

Unsubscribe

[Open and remix this design](https://brew.new/templates/codepen/jest-tests-now-on-codepen)

[Browse email designs](https://brew.new/browse/templates)