- go to web directory
npx create-react-app testjest- VSCode, open directory
- look at
/src/App.test.js npm test- you see that the test passes
- an example of an
App.test.jsfile is:
Last active
August 22, 2020 16:37
-
-
Save edwardtanguay/f4115f5f39c140e87c07874d354c18f6 to your computer and use it in GitHub Desktop.
How to get Jest unit tests running in React
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { render } from '@testing-library/react'; | |
| import App from './App'; | |
| import * as qstr from '../src/qtools/qstr'; | |
| import * as qarr from '../src/qtools/qarr'; | |
| test('site loads', () => { | |
| const { getByText } = render(<App />); | |
| const linkElement = getByText(/to this site/i); | |
| expect(linkElement).toBeInTheDocument(); | |
| }); | |
| test('qstr.capitalizeFirstLetter() with lowercase works', () => { | |
| expect(qstr.capitalizeFirstLetter('this')).toBe('This'); | |
| }); | |
| test('qstr.capitalizeFirstLetter() with uppercase works', () => { | |
| expect(qstr.capitalizeFirstLetter('This')).toBe('This'); | |
| }); | |
| test('qstr.replaceAll() replacing all characters works', () => { | |
| expect(qstr.replaceAll('xxxxx', 'x', 'a')).toBe('aaaaa'); | |
| }); | |
| test('qstr.replaceAll() replacing some characters works', () => { | |
| expect(qstr.replaceAll('This is a test.', 'i', 'x')).toBe('Thxs xs a test.'); | |
| }); | |
| test('qstr.contains() positive-find works', () => { | |
| expect(qstr.contains('This is a test.', 'is a')).toBeTruthy(); | |
| }); | |
| test('qstr.contains() negative-find works', () => { | |
| expect(qstr.contains('This is a test.', 'nnn')).toBeFalsy(); | |
| }); | |
| test('qstr.endsWith() positive-find works', () => { | |
| expect(qstr.endsWith('This is a test.', 'test.')).toBeTruthy(); | |
| }); | |
| test('qstr.endsWith() negative-find works', () => { | |
| expect(qstr.endsWith('This is a test.', 'nnn')).toBeFalsy(); | |
| }); | |
| test('qarr.hasDuplicateNumbers() positive test work', () => { | |
| expect(qarr.hasDuplicateNumbers([1, 2, 3, 4, 5, 6, 3])).toBeTruthy(); | |
| }); | |
| test('qarr.hasDuplicateNumbers() positive test work', () => { | |
| expect(qarr.hasDuplicateNumbers([1, 2, 3, 4, 5, 6])).toBeFalsy(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // this file can be put in the directory where its data exists, e.g. in this case in the /src/data directory | |
| import * as qarr from 'qtools/qarr'; | |
| const flashcards = require('../data/flashcards.json'); | |
| test('Have enough flashcards in the datasource', () => { | |
| expect(flashcards.length).toBeGreaterThan(150); | |
| }); | |
| test('Each flashcard has an id that is a number', () => { | |
| flashcards.map(m => { | |
| expect(typeof m.id).toBe('number'); | |
| }); | |
| }); | |
| test('Each flashcard has a unique id.', () => { | |
| const ids = flashcards.map(m => m.id); | |
| expect(qarr.hasDuplicateNumbers(ids)).toBeFalsy(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment