22title : Jest Tests
33authors : ['CompuIves']
44description :
5- CodeSandbox has a native integration with Jest Tests for running tests.
5+ CodeSandbox has a native integration with Jest for running tests.
66---
77
88## What is Jest
99
1010Jest is a zero configuration test runner that allows you easily write JavaScript
11- tests without setting anything up. For more info on Jest you can look
12- [ here] ( https://facebook.github.io/jest/ ) .
11+ tests without setting anything up. More info on [ Jest] ( https://jestjs.io/ ) .
1312
1413## How to use Jest in CodeSandbox Client Sandboxes
1514
16- In Client Sandboxes you can run Jest tests by creating files that end with
15+ In [ Client sandboxes ] ( /docs/environment ) you can run Jest tests by creating files that end with
1716` .test.js ` , ` .spec.js ` , ` .test.ts(x) ` and ` .spec.js(x) ` . We will automatically
18- detect these test files and show the results in the bottom bar .
17+ detect these test files and show the results in the Tests tab .
1918
20- In Container Sandboxes you can still use Jest (or whichever test framework you
19+ Note: In [ Container sandboxes ] ( (/docs/environment) ) you can still use Jest (or whichever test framework you
2120want), but we don't auto-detect these and you'd need to set it up yourself as
22- you normally would.
21+ you would locally .
2322
2423![ Test Bottom] ( ./images/jest-tests.png )
2524
26- You can also open the test view instead of the browser preview by clicking on
27- the 'Show Tests' icon in the top right.
28-
29- ![ Show Tests] ( ./images/show-tests.png )
30-
3125The left side of the test view is an overview of all test files. The right side
32- shows the details of a file when you select it.
26+ shows the details of a file when you select it. You can decide re-run tests manually by clicking on the Play icon. We
27+ automatically watch for file changes, but you can disable this by clicking on the
28+ 'Refresh' icon on the left side.
3329
3430![ Test Details] ( ./images/jest-details.png )
3531
36- You can decide to rerun tests manually by clicking on the Play icon. We
37- automatically watch for file changes, you can disable this by clicking on the
38- 'Refresh' icon on the left side.
39-
4032## Test Failures
4133
4234We show failed tests in two ways: in the test overview and in the code editor
@@ -50,8 +42,8 @@ And will also show squiggles in the editor:
5042
5143![ Test Squiggles] ( ./images/jest-squiggles.png )
5244
53- ## Test Example
45+ ## Example
5446
55- Here's an example sandbox running Jest tests :
47+ Here's a failing Jest test running in a sandbox :
5648
5749<iframe src =" https://codesandbox.io/embed/n9m2w9q8x0?view=preview " style =" width :100% ; height :500px ; border :0 ; border-radius : 4px ; overflow :hidden ;" sandbox =" allow-modals allow-forms allow-popups allow-scripts allow-same-origin " ></iframe >
0 commit comments