How would one go about calling a function from an imported action module? Here is my component
class Task extends Component {
handleClick(e) {
e.preventDefault();
Actions.returnTask(this.props.id);
}
render() {...}
}
and tests that look like this:
jest.dontMock('./Task');
jest.dontMock('./Actions');
describe('Tasks', function() {
let renderedComponent;
let mockReturnTask;
let TaskActions;
beforeEach(function() {
renderedComponent = TestUtils.renderIntoDocument(
<Task task={testTask} key={1} />
);
Actions = require('./Actions');
mockReturnTask = jest.genMockFn();
Actions.returnTask = mockReturnTask;
});
it('should call a returnTask action on Actions', function() {
renderedComponent.handleClick(event);
expect(mockReturnTask).toBeCalled();
});
});
When running my test it tells me that the function was not called. If I do expect(Actions.returnTask).toBeCalled(); I get an error message that toBeCalledWith() should be used on a mock function error. How do I mock a function on the external Actions and check that it is called in my tests? I feel like my method above should be working.
Your example doesn't include the require of Task but I'm pretty sure of what happened here. Jest users must be aware of what require they do, and when.
Chronologically:
jest is set to never mock Actions and Task
Task component is required, jest requires it for real
Actions is required because it is required in the Task component. jest requires it for real.
Task component is instantiated
Actions.returnTask is monkey-patched but it's not the function the component is bind with, it's a new function who exist only in the test.
To make your component using a jest mocked function, you have to require and monkey-patch Actions before requiring Tasks
Be aware that you don't have to unmocked Actions if you mock a function of Actions right after. It's exactly what the jest auto-mocking killing feature is made for : remove jest.dontMock('./Actions'); and all references to your Actions module. The test should be working.
Related
How would one test that a piece of custom middleware is actually called from a standard HTTP event?
ie. The middleware is called from:
MyController.js
router.get('/some/endpoint', [myMiddleware()], (req, res, next) => {
// Code to do whatever here
});
The middleware itself can be defined as:
MyMiddleware.js
module.exports = () => {
// Middleware code in here
}
My quest is to check that the middleware is called once from my unit test, but I cannot find documentation around this.
MyTest.test.js
it('Should return whatever from GET call', () => {
return request(app).get('/some/endpoint')
.expect(200)
.expect(res => {res.body.should.deep.equal(bodyValue)});
// How would I place code in here to check that MyMiddleware is called?
// ie. sinon.assert.calledOnce(MyMiddleware)
});
I have thought about using Sinon's spy, but I can't think of how to hook into the middleware... My attempt was this:
const mwSpy = sinon.spy(require('path to middleware file'));
sinon.assert(calledOnce(mwSpy));
The usual way of going about this is splitting this into two tests, an integration test and a unit test.
Will the middleware I specified in the router.get call end up being called when someone hits this endpoint?
Does my middleware do the right thing?
The first part is basically testing that the Express API is doing what the documentation says. That's not what unit tests are for (this was tagged unit-testing), but since you are already using HTTP requests to test the endpoint, I guess that's not what you are after anyway: you are basically creating verification tests for your system.
You could still test the Express routing without HTTP, though, as I detail in the answer to this question, concerning how to test the router programmatically (faster tests, no http), but less just stick to what you have.
So the basic question is: "My quest is to check that the middleware is called once from my unit test". You don't seem to concern yourself with whether the middleware is doing the right thing or not, just that it's called, which calls for the question on whether we should test the middleware or the layer using the middleware.
In both cases, you need to find a way of injecting a test spy. Either you write a small utility method that will inject that spy: function setMiddleware(module){ middleware = module; } or you use some tooling like proxyquire. See this tutorial on Sinon's homepage for background.
I would just do this (in the test code):
it('Should return whatever from GET call', () => {
var middlewareFake = sinon.fake();
// I am assuming it's the actual app object you are referencing below in the request(app) line
var app = proxyquire('../app/index.js', { './my-middleware': middlewareFake });
//
return request(app).get('/some/endpoint')
.expect(200)
.expect(res => {
res.body.should.deep.equal(bodyValue)
expect(middlewareFake).was.called;
});
});
I have a simple Observable piping from another Observable that I want to test.
const loginState$ = messageBusObservables.loginState$.pipe(
startWith({ isLoggedIn: false })
pluck('isLoggedIn'),
distinctUntilChanged()
)
messageBusObservables is an object of observables. Where loginState$ is an Observable.
In my tests, I thought I would easily be able to mock the './messageBus' module like this: (how the module is imported is irrelevant, but import preferred)
import { of } from 'rxjs'
import './messageBus'
jest.mock('./messageBus', () => ({
loginState$: of({ isLoggedIn: true }),
}))
However, Jest throws the error:
babel-plugin-jest-hoist: The module factory of jest.mock() is not allowed to reference any out-of-scope variables.
Invalid variable access: of
I have tried, putting it in a jest.fn() I have tried extracting of({ isLoggedIn: true }) to a variable. But I keep getting the same error from jest.
So how can I mock the input into my Observables using Jest? I'll run into the same problem with other observables using .merge, .zip etc.
It needs to be a real observable that is the input of my other observables. I just want to mock the value with something like of() rather than mocking an object, with a method on it, that returns an object with a .pipe method etc. (I don't want to mock the functionality of an Observable). I want to pass it a real observable with a value set in my unit test.
I also need these mocks to be dynamic. So the mock from 1 assertion can be different from the mock in the next assertion. (clearing them with something like a beforeEach)
EDIT:
I also tried to use babel-plugin-rewire to mock this module, this worked fine in the *.test.js file where I was mocking it. But in the actual file no matter what I set the export to using rewire, it always got imported as the original Observable.
the reason you are getting this message:
babel-plugin-jest-hoist: The module factory of jest.mock() is not allowed to reference any out-of-scope variables. Invalid variable access: of
is because jest automatically hoists calls to jest.mock so that they happen before the imports.
You have two options to get around this default behaviour, the simple way is to use jest.doMock which is NOT hoisted:
jest.doMock('./messageBus', () => ({
loginState$: of({ isLoggedIn: true }),
}))
Alternatively, you can prefix all the variables referenced inside the mock factory passed to jest.mock with "mock":
const mockMessageBus = {
loginState$: of({ isLoggedIn: true }),
}
jest.doMock('./messageBus', () => mockMessageBus)
(note that you are responsible for ensuring all mock variables referenced in the factory function are in scope when jest.mock is called)
You're close.
You are trying to mock the module by passing a module factory as the second parameter to jest.mock. The main constraint of that approach is that the module factory must be completely self-contained and "is not allowed to reference any out-of-scope variables".
Referencing of from rxjs in the module factory (as you have found) breaks that constraint and causes the error you are seeing.
Fortunately there are other ways to mock modules.
From what I can see of your code it looks like the easiest approach would be to create a Manual Mock of the messageBus module.
Create a __mocks__ folder in the same directory as messageBus.js and create the mock (also called messageBus.js) within the __mocks__ folder.
__mocks__/messageBus.js will look something like this:
import { of } from 'rxjs'
export default {
loginState$: of({ isLoggedIn: true })
}
Then tell Jest you want to use the manual mock within your test by calling
jest.mock('messageBus');
at the top of your test file.
That call is hoisted by Jest and ensures that any code that imports messageBus during the test will get the mocked module.
All is in the title : how can one test what is done in the component's constructor ?
For your information, I am using a service that requires a setting, and I would like to see if the 2 methods that I call in the constructor are called correctly.
My component's constructor :
constructor(
public router: Router,
private profilService: ProfileService,
private dragula: DragulaService,
private alerter: AlertService
) {
dragula.drag.subscribe((value) => {
this.onDrag(value);
});
dragula.dragend.subscribe((value) => {
this.onDragend(value);
});
}
I would inject a fake service using the DI system, which would mean writing the tests something like this:
describe('your component', () => {
let fixture: ComponentFixture<YourComponent>;
let fakeService;
let dragSubject = new ReplaySubject(1);
...
beforeEach(async(() => {
fakeService = {
drag: dragSubject.asObservable(),
...
};
TestBed.configureTestingModule({
declarations: [YourComponent, ...],
providers: [
{ provide: DragulaService, useValue: fakeService },
...
],
});
}));
beforeEach(() => {
fixture = TestBed.createComponent(YourComponent);
fixture.detectChanges();
});
it('should do something when a drag event occurs', () => {
dragSubject.next({ ... });
fixture.detectChanges();
...
});
});
This allows you to trigger "drag events" whenever you like by calling .next on the subject, which causes subscribers to the fields on the fake service to get called. You can then make assertions on the outcomes you expect from that.
Note that you do not need to call constructor yourself; this method is invoked when the DI system instantiates your component, i.e. when TestBed.createComponent is called.
I would recommend that you don't spy on the component methods (e.g. this.onDrag) and just make sure that they get called, but rather test that whatever those methods should do as a result happens; this makes the tests more robust to changes in the specific implementation (I wrote a bit about this on my blog: http://blog.jonrshar.pe/2017/Apr/16/async-angular-tests.html).
The simple way to test anything inside constructor function is to create component instance and then test it.
it('should call initializer function in constructor', () => {
TestBed.createComponent(HomeComponent); // this is the trigger of constructor method
expect(sideNavService.initialize).toHaveBeenCalled(); // sample jasmine spy based test case
});
One thing to note that, if you want to distinguish between constructor and ngOnInit, then don't call fixture.detectChanges() inside beforeEach(). instead call manually whenever you need.
Since OP states "I would like to see if the 2 methods that I call in the constructor are called correctly." I have a better approach.
Write a unit test. You don't need to use the test bed for this. It will slow down your tests a lot. Instantiate your mocks manually. Set your spies on the methods you're interested in and then call the component constructor manually with the stubs you've instantiated and set spies on. Then test if spied methods have been called correctly.
The key is to extend your stubs from the original service classes. jasmine.createSpyObj helps for mocking angular classes like Router.
New to testing and React Redux, so I may be conflating a few issues here. I will only present one example, but I have tried many different combinations of mount(), shallow(), instance(), stub, spy and more.
Given a component, where setFooData() updates redux state and Foo.props.data:
const mapDispatchToProps = (dispatch, props) => ({
setFooData(fooId, data) {
dispatch(Actions.setFooData(fooId, data));
},
});
...
return (
<div fooId={this.props.fooId}>
<Foo {...fooProps}/>
</div>
);
I would like to write some tests around the conditions under which setFooData() is called, namely conditions in lifecycle methods like componentDidMount() and componentWillReceiveProps().
Because setFooData() involves server calls and more, and because these tests merely concern the view layer and how the component renders as a result of Foo.props.data being set eventually by setFooData(), setFooData() seems like a good candidate for stub.
Therefore, Enzyme's shallow(), rather than mount(), seems appropriate, correct? In any case, when I try to stub setFooData():
let wrapper = return shallow(<Foo {...props}/>);
let stub = sinon.stub(wrapper.instance(), 'setFooData');
I receive the error:
Attempted to wrap undefined property setFooData as function
Upon inspection, wrapper.instance() yields an object where setFooData() is indeed not defined, but according to other examples, I would think it should be.
Furthermore, setFooData() does exist on wrapper.instance().selector.props, and while let stub = sinon.stub(wrapper.instance().selector.props, 'setFooData'); avoids the error, when I inspect the object setFooData() =/= stub, and the function is not called as per the test.
When I use mount() instead,
let wrapper = mount(<Provider store={store}><Foo {...props}/></Provider>);
let componentDidMountSpy = sinon.spy(Foo.prototype, 'componentDidMount');
let componentWillReceivePropsSpy = sinon.spy(Foo.prototype, 'componentWillReceiveProps');
expect(componentDidMountSpy.called).to.be.true; //passes
expect(componentWillReceivePropsSpy.called).to.be.true; //passes
expect(stub.called).to.be.true; //fails
I receive a different error that appears related to the body of setFooData(), so setFooData() is called but the function is not actually stubbed to prevent its real body from being executed.
Thanks for any help to clarify my understanding.
I think you're taking the hardest path. You should test your component in isolation, not the connected one. If you test the connected component you're making an integration test and double testing that connect indeed works. That's already tested in react-redux for you.
Instead, test your action creators by themselves in unit tests.
Then, export your component as named export without connecting and use the default export for the connect version.
That way you can simply import the pure-React version and pass anything you want as props, in order to make easy assertions afterwards.
If you need to specifically test that something happens in those lifecycle methods, you can call those methods from the instance:
const fakeActionCreator = sinon.spy()
const subject = mount(<MyComponent doSomething={ fakeActionCreator } />)
subject.instance().componentDidMount()
assert.equal(fakeActionCreator.callCount, 1)
I created a component, whose action uses store service. How can I stub this action from integration test?
// app/components/invoice-form.js
export default Ember.Component.extend({
actions: {
loadPartners() {
let self = this;
this.get('store').findAll('partner').then(function(partners) {
self.set('partners', partners);
});
}
}
});
In this component's template I pass this action as closure to child component:
{{button-confirmation text="Are you sure?" onConfirm=(action "loadPartners")}}
In my integration test, I render the component as usual
this.render(hbs`{{invoice-form}}`);
Action loadPartners is not passed as argument to component helper. Its just static component's action.
So the question is how to stub action loadPartners from integration test?
In an integration test, you shouldn't change the inner part of components. Instead of it, you should change implementations of your component's dependencies.
So in this case, you should stub store. See how to stub store.
Ref from Guide