I'm getting this strange syntax error whilst running a simple test for a Todo demo I'm writing. I have added the code and test in the same file so that you can see what's going on.
Any help will be greatly appreciated.
import { Text } from 'react-native';
import React from 'react';
import { shallow } from 'enzyme';
const TodoItem = () => {
return(
<Text>{Hello}</Text>
);
};
export default TodoItem;
describe('<TodoItem', () => {
it('should update uncompleted task to complete when pressed', () => {
const wrapper = shallow(<TodoItem />)
});
});
Test Result
Run: jest
FAIL __tests__/components/TodoItem.spec.tsx
● Test suite failed to run
SyntaxError: /Users/jonesagyemang/Projects/side/Todoist/__tests__/components/TodoItem.spec.tsx: Unterminated regular expression (7:19)
5 | const TodoItem = () => {
6 | return(
> 7 | <Text>{Hello}</Text>
| ^
8 | );
9 | };
10 |
at Object.raise (../../../../../usr/local/lib/node_modules/jest/node_modules/#babel/parser/lib/index.js:6322:17)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.2s
Ran all test suites related to changed files.
Watch Usage: Press w to show more.
I'm assuming it's a text that you want to display with Text component. Try removing the {} for the Hello since it isn't a variable or a function in your code.
const TodoItem = () => {
return(
<Text>Hello</Text>
);
};
Related
I'm trying to make a test using ReacTJS Testing Library for a to-do list form, the test I want to implement it's supposed to check if the form has called a function from parameter but I'm having a hard time receiving an error I cannot solve (error at the end of the question).
What am I doing wrong here??
My form component code:
import { FC } from "react";
import "./TaskCreator.css";
interface TaskCreatorProps {
sendNewTask: (text: string) => void;
}
const TaskCreator: FC<TaskCreatorProps> = ({ sendNewTask }) => {
return (
<form
action="#"
className="todo__form"
onSubmit={(e) => {
e.preventDefault();
sendNewTask(e.currentTarget.taskInput.value);
}}
>
<input
name="taskInput"
className="form__input"
type="text"
placeholder="New to do..."
required
/>
<button className="form__submit" type="submit">
Add new task
</button>
</form>
);
};
export default TaskCreator;
The test's code:
import { render, screen } from "#testing-library/react";
import userEvent from "#testing-library/user-event";
import TaskCreator from "./TaskCreator";
describe("Given a TaskCreator component", () => {
test("When the user creates a new task, it should be sent by parameter to App component", () => {
const callbackFn = jest.fn();
render(<TaskCreator sendNewTask={callbackFn} />);
const formInput = screen.getByRole("textbox");
userEvent.type(formInput, "test");
const formButton = screen.getByRole("button");
userEvent.click(formButton);
expect(formInput).toHaveValue("test");
expect(callbackFn).toHaveBeenCalled();
});
});
The error:
● Given a TaskCreator component › When the user creates a new task, it should be sent by parameter to App component
TypeError: Cannot read properties of undefined (reading 'value')
13 | onSubmit={(e) => {
14 | e.preventDefault();
> 15 | sendNewTask(e.currentTarget.taskInput.value);
| ^
16 | }}
17 | >
18 | <input
● Given a TaskCreator component › When the user creates a new task, it should be sent by parameter to App component
expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
15 |
16 | expect(formInput).toHaveValue("test");
> 17 | expect(callbackFn).toHaveBeenCalled();
| ^
18 | });
19 | });
20 |
at Object.<anonymous> (src/components/TaskCreator/TaskCreator.test.tsx:17:24)
Test Suites: 2 failed, 2 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 0.764 s, estimated 1 s
I have already tried to test with async and await but I didn't get any result.
My component:
import React from 'react'
const TestAsync = () => {
const [counter, setCounter] = React.useState(0)
const delayCount = () => (
setTimeout(() => {
setCounter(counter + 1)
}, 500)
)
return (
<>
<h1 data-testid="counter">{ counter }</h1>
<button data-testid="button-up" onClick={delayCount}> Up</button>
<button data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button>
</>
)
}
export default TestAsync
My test file:
describe("Test async", () => {
it("increments counter after 0.5s", async () => {
const { getByTestId, getByText } = render(<TestAsync />);
fireEvent.click(getByTestId("button-up"));
const counter = await waitForElement(() => getByTestId("counter"));
expect(counter).toHaveTextContent("1");
});
});
After run the test file, I got error said:
Expected element to have text content:
1
Received:
0
I am a little bit confused why I use waitForElement to get the element but why the element still has the old value?
React-testing-lib version 9.3.2
First of all, waitForElement has been deprecated. Use a find* query (preferred: https://testing-library.com/docs/dom-testing-library/api-queries#findby) or use waitFor instead: https://testing-library.com/docs/dom-testing-library/api-async#waitfor
Now, we use waitFor:
waitFor may run the callback a number of times until the timeout is reached.
You need to wrap the assertion statement inside the callback of the waitFor. So that waitFor can run the callback multiple times. If you put the expect(counter).toHaveTextContent('1'); statement outside and after waitFor statement, then it only run once. React has not been updated when assertions run.
Why RTL will run the callback multiple times(run callback every interval before timeout)?
RTL use MutationObserver to watch for changes being made to the DOM tree, see here. Remember, our test environment is jsdom, it supports MutationObserver, see here.
That means when React updates the state and applies the update to the DOM, the changes of the DOM tree can be detected and RTL will run the callback again including the assertion. When the React component states are applied and become stable, the last run of the callback is taken as the final assertion of the test. If the assertion fails, an error is reported, otherwise, the test passes.
So the working example should be:
index.tsx:
import React from 'react';
const TestAsync = () => {
const [counter, setCounter] = React.useState(0);
const delayCount = () =>
setTimeout(() => {
setCounter(counter + 1);
}, 500);
return (
<>
<h1 data-testid="counter">{counter}</h1>
<button data-testid="button-up" onClick={delayCount}>
Up
</button>
<button data-testid="button-down" onClick={() => setCounter(counter - 1)}>
Down
</button>
</>
);
};
export default TestAsync;
index.test.tsx:
import { fireEvent, render, waitFor } from '#testing-library/react';
import React from 'react';
import TestAsync from '.';
import '#testing-library/jest-dom/extend-expect';
describe('Test async', () => {
it('increments counter after 0.5s', async () => {
const { getByTestId } = render(<TestAsync />);
fireEvent.click(getByTestId('button-up'));
await waitFor(() => {
const counter = getByTestId('counter');
expect(counter).toHaveTextContent('1');
});
});
});
Test result:
PASS stackoverflow/71639088/index.test.tsx
Test async
✓ increments counter after 0.5s (540 ms)
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 88.89 | 100 | 75 | 88.89 |
index.tsx | 88.89 | 100 | 75 | 88.89 | 17
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.307 s
I am trying to write some unit tests for the event handlers that I wrote inside my component. I would like to write tests for the states updates inside that event handlers.
For example I have the following function that are called onMouseDown inside the component. How can I write some tests about that.
const [visible, setVisibility ] = useState(false);
const onSelection = () => {
setVisibility(!visible)
};
<div onMouseDown ={()=> onSelection(items)}>Click</div>
{visible && <div>simple text</div>}
Can anybody guide me through there. Thanks in advance
Suppose the component like this:
index.tsx:
import React, { useState } from 'react';
export default function Example() {
const [visible, setVisibility] = useState(false);
const onSelection = () => {
setVisibility(!visible);
};
return (
<div>
<div onMouseDown={() => onSelection()}>Click</div>
{visible && <div>simple text</div>}
</div>
);
}
We test the behavior of the component from the user's perspective.
We should test: What is the component rendering before triggering the mousedown event and what is rendered after the visible state changes.
index.test.tsx
import { shallow } from 'enzyme';
import React from 'react';
import Example from './';
describe('70577146', () => {
test('should pass', () => {
const wrapper = shallow(<Example />);
const button = wrapper.find('div[children="Click"]');
expect(wrapper.find('div[children="simple text"]').exists()).toBeFalsy();
button.simulate('mousedown');
expect(wrapper.find('div[children="simple text"]').exists()).toBeTruthy();
});
});
Test result:
PASS examples/70577146/index.test.tsx (11.966 s)
70577146
✓ should pass (11 ms)
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
index.tsx | 100 | 100 | 100 | 100 |
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 13.599 s, estimated 14 s
I'm receiving the following error when trying to test a component with angularJS. This component is part of a library I've created with this language and uses Jest instead of Jasmine.
TypeError: angular_1.default.mock.module is not a function
6 | describe('Badge', () => {
7 | beforeEach(() => {
> 8 | angular.mock.module(['myApp.components.quoteCard']);
| ^
9 | });
10 | it('renders badge', () => {
11 | render(`
This is the test code following the specifities:
import angular from 'angular';
import 'angular-mocks';
import { render, screen } from 'angularjs-testing-library';
import './quote-card';
describe('Badge', () => {
beforeEach(() => {
angular.mock.module(['myApp.components.quoteCard']);
});
it('renders badge', () => {
render(`
<quote-card-component
content="content"
author="author"
></quote-card-component>
`);
expect(screen.getByText(`content`)).toBeInTheDocument();
});
});
If someone knows how to solve this, it would be great. Thanks folks!
Angular mocks works only with Jasmine or Mocha. Theres a strict condition inside the library. So you need to setup a global variable before running your tests.
For example
global.mocha = true;
Anyhow, trying to test if a function has been called after its fired. The fireEvent is working as I get a console.log from that function. But the .toHaveBeenCalledTimes(1) returns 0. What have i missed?
If I have the handleLoginSubmit function in the parent and pass it as a prop down to the child and in the test everything passes. But if it's in the same component it fails. Using typescript if that has any meaning.
This is tested
import React, { FC } from 'react';
type Event = React.FormEvent<HTMLFormElement>;
interface Login {
handleLoginSubmit?: (event: Event) => React.ReactNode;
}
const Login: FC<Login> = () => {
const handleLoginSubmit = (_event: Event) => {
console.log('Firing' ); // This is logged
};
return (
<form data-testid='form' onSubmit={(event) => handleLoginSubmit(event)}>
<input data-testid='email'/>
<input data-testid='password'/>
<button data-testid='login-button'>login</button>
</form>
);
};
export default Login;
My test for submiting
it('should handle ClickEvents', () => {
const handleLoginSubmit = jest.fn();
const { getByTestId } = render(<Login/>);
expect(getByTestId('login-button')).toBeTruthy();
fireEvent.submit(getByTestId('form'));
expect(handleLoginSubmit).toHaveBeenCalledTimes(1);
});
Error message
● Login page › should handle ClickEvents
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
32 | fireEvent.submit(getByTestId('form'));
33 |
> 34 | expect(handleLoginSubmit).toHaveBeenCalledTimes(1);
| ^
35 |
36 | });
37 | });
at Object.it (__tests__/components/Login.test.tsx:34:31)
You can't assert if the handleLoginSubmit function is to be called directly. Since it's defined in the private scope of Login SFC. You can't mock or spy on this function because you can't access it. So, you need to test it indirectly. Since you are using console.log in this function, we can spy console.log. If it's been called, that means the handleLoginSubmit function has been called.
E.g.
index.tsx:
import React, { FC } from "react";
type Event = React.FormEvent<HTMLFormElement>;
interface Login {
handleLoginSubmit?: (event: Event) => React.ReactNode;
}
const Login: FC<Login> = () => {
const handleLoginSubmit = (_event: Event) => {
console.log("Firing");
};
return (
<form data-testid="form" onSubmit={event => handleLoginSubmit(event)}>
<input data-testid="email" />
<input data-testid="password" />
<button data-testid="login-button">login</button>
</form>
);
};
export default Login;
index.spec.tsx:
import { render, fireEvent } from "#testing-library/react";
import Login from "./";
import React from "react";
it("should handle ClickEvents", () => {
const logSpy = jest.spyOn(console, "log");
const { getByTestId } = render(<Login />);
expect(getByTestId("login-button")).toBeTruthy();
fireEvent.submit(getByTestId("form"));
expect(logSpy).toHaveBeenCalledTimes(1);
});
Unit test result with 100% coverage:
PASS src/stackoverflow/59162138/index.spec.tsx
✓ should handle ClickEvents (42ms)
console.log node_modules/jest-mock/build/index.js:860
Firing
-----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
index.tsx | 100 | 100 | 100 | 100 | |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.987s, estimated 9s
Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59162138